<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>webdoc</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            webdoc
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li class="active"><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-dva.html">30.cms-10-dva</a></li><li><a href="../html/30.cms-11-front.html">30.cms-11-front</a></li><li><a href="../html/31.cms-12-api.html">31.cms-12-api</a></li><li><a href="../html/31.cms-13-front.html">31.cms-13-front</a></li><li><a href="../html/31.cms-14-deploy.html">31.cms-14-deploy</a></li><li><a href="../html/32.ant.html">32.ant</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. libraryTarget 和 library">1. libraryTarget 和 library</a><ul><li><a href="#t11.1 var (默认)">1.1 var (默认)</a><ul><li><a href="#t21.1.1 index.js">1.1.1 index.js</a></li><li><a href="#t31.1.2 bundle.js">1.1.2 bundle.js</a></li><li><a href="#t41.1.3 index.html">1.1.3 index.html</a></li></ul></li><li><a href="#t51.2 commonjs">1.2 commonjs</a><ul><li><a href="#t61.2.1 导出方式">1.2.1 导出方式</a></li><li><a href="#t71.2.2 使用方式">1.2.2 使用方式</a></li></ul></li><li><a href="#t81.3 commonjs2">1.3 commonjs2</a><ul><li><a href="#t91.3.1 导出方式">1.3.1 导出方式</a></li><li><a href="#t101.3.2 使用方式">1.3.2 使用方式</a></li></ul></li><li><a href="#t111.4 this">1.4 this</a><ul><li><a href="#t121.4.1 导出方式">1.4.1 导出方式</a></li><li><a href="#t131.4.2 使用方式">1.4.2 使用方式</a></li></ul></li><li><a href="#t141.5 window">1.5 window</a><ul><li><a href="#t151.5.1 导出方式">1.5.1 导出方式</a></li><li><a href="#t161.5.2 使用方式">1.5.2 使用方式</a></li></ul></li><li><a href="#t171.6 global">1.6 global</a><ul><li><a href="#t181.6.1 导出方式">1.6.1 导出方式</a></li><li><a href="#t191.6.2 使用方式">1.6.2 使用方式</a></li></ul></li></ul></li><li><a href="#t202.DLL">2.DLL</a><ul><li><a href="#t212.1 定义Dll">2.1 定义Dll</a></li><li><a href="#t222.2 使用动态链接库文件">2.2 使用动态链接库文件</a></li><li><a href="#t232.3 html中使用">2.3 html中使用</a></li></ul></li><li><a href="#t243. HappyPack">3. HappyPack</a></li><li><a href="#t254. CDN">4. CDN</a><ul><li><a href="#t264.1 使用缓存">4.1 使用缓存</a></li><li><a href="#t274.2 域名限制">4.2 域名限制</a></li><li><a href="#t284.3 接入CDN">4.3 接入CDN</a></li></ul></li><li><a href="#t295.Tree Shaking">5.Tree Shaking</a><ul><li><a href="#t305.1 普通情况">5.1 普通情况</a></li><li><a href="#t315.2 不要编译ES6模块">5.2 不要编译ES6模块</a></li><li><a href="#t325.3 显示未使用的导出实例">5.3 显示未使用的导出实例</a></li><li><a href="#t335.4 剔除用不上的代码">5.4 剔除用不上的代码</a></li><li><a href="#t345.5 启用压缩">5.5 启用压缩</a></li><li><a href="#t355.5 深度分析">5.5 深度分析</a></li></ul></li><li><a href="#t366.提取公共代码">6.提取公共代码</a><ul><li><a href="#t376.1 为什么需要提取公共代码">6.1 为什么需要提取公共代码</a></li><li><a href="#t386.2 如何提取">6.2 如何提取</a></li><li><a href="#t396.3 提取公共代码">6.3 提取公共代码</a></li></ul></li><li><a href="#t407.开启 Scope Hoisting">7.开启 Scope Hoisting</a><ul><li><a href="#t417.1 插件配置">7.1 插件配置</a></li><li><a href="#t427.2 代码">7.2 代码</a></li></ul></li><li><a href="#t438.动态导入和懒加载">8.动态导入和懒加载</a><ul><li><a href="#t448.1 动态导入和懒加载">8.1 动态导入和懒加载</a><ul><li><a href="#t458.1.1  handler.js">8.1.1  handler.js</a></li><li><a href="#t468.1.2 index.js">8.1.2 index.js</a></li><li><a href="#t478.1.3 html">8.1.3 html</a></li></ul></li><li><a href="#t488.2 react-router4 路由懒加载">8.2 react-router4 路由懒加载</a><ul><li><a href="#t498.2.1 index.js">8.2.1 index.js</a></li><li><a href="#t508.2.2 Bundle">8.2.2 Bundle</a></li><li><a href="#t518.2.3 About">8.2.3 About</a></li></ul></li><li><a href="#t528.2.4 源码">8.2.4 源码</a><ul><li><a href="#t538.2.4.1 bundle.js">8.2.4.1 bundle.js</a></li><li><a href="#t548.2.4.2 hot bundle.js">8.2.4.2 hot bundle.js</a></li><li><a href="#t558.2.4.3 0.bundle">8.2.4.3 0.bundle</a></li></ul></li></ul></li><li><a href="#t569. 用 HMR 提高开发效率">9. 用 HMR 提高开发效率</a><ul><li><a href="#t579.1 模块热替换原理">9.1 模块热替换原理</a></li><li><a href="#t589.2 配置">9.2 配置</a><ul><li><a href="#t599.2.1 配置hot">9.2.1 配置hot</a></li><li><a href="#t609.2.2 代码实现">9.2.2 代码实现</a></li></ul></li><li><a href="#t619.3 原理">9.3 原理</a><ul><li><a href="#t629.3.1. server端">9.3.1. server端</a><ul><li><a href="#t639.3.1.1 webpack 实例">9.3.1.1 webpack 实例</a></li><li><a href="#t649.3.1.2 express实例">9.3.1.2 express实例</a></li></ul></li><li><a href="#t659.3.2.浏览器端">9.3.2.浏览器端</a><ul><li><a href="#t669.3.2.1 建立连接">9.3.2.1 建立连接</a></li><li><a href="#t679.3.2.2 向client发消息">9.3.2.2 向client发消息</a></li><li><a href="#t689.3.2.3 保存hash">9.3.2.3 保存hash</a></li><li><a href="#t699.3.2.4 收到 ok 消息">9.3.2.4 收到 ok 消息</a></li><li><a href="#t709.3.2.5 check方法执行">9.3.2.5 check方法执行</a></li><li><a href="#t719.3.2.6 获取manifest文件">9.3.2.6 获取manifest文件</a></li><li><a href="#t729.3.2.7 加载新模块">9.3.2.7 加载新模块</a></li><li><a href="#t739.3.2.8 accept 回调">9.3.2.8 accept 回调</a></li></ul></li></ul></li></ul></li><li><a href="#t7410. 输出分析">10. 输出分析</a><ul><li><a href="#t7510.1 安装">10.1 安装</a></li><li><a href="#t7610.2 配置">10.2 配置</a></li><li><a href="#t7710.3  输出">10.3  输出</a></li><li><a href="#t7810.4 在线分析">10.4 在线分析</a></li></ul></li><li><a href="#t79参考">参考</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <p>&#xFEFF;</p>
<h2 id="t01. libraryTarget &#x548C; library">1. libraryTarget &#x548C; library <a href="#t01. libraryTarget &#x548C; library"> # </a></h2>
<p>&#x5F53;&#x7528; Webpack &#x53BB;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x53EF;&#x4EE5;&#x88AB;&#x5176;&#x4ED6;&#x6A21;&#x5757;&#x5BFC;&#x5165;&#x4F7F;&#x7528;&#x7684;&#x5E93;&#x65F6;&#x9700;&#x8981;&#x7528;&#x5230;&#x5B83;&#x4EEC;&#x3002;zhufengnodejs</p>
<ul>
<li><code>output.libraryTarget</code> &#x914D;&#x7F6E;&#x4EE5;&#x4F55;&#x79CD;&#x65B9;&#x5F0F;&#x5BFC;&#x51FA;&#x5E93;</li>
<li><code>output.library</code> &#x914D;&#x7F6E;&#x5BFC;&#x51FA;&#x5E93;&#x7684;&#x540D;&#x79F0;
output.libraryTarget &#x662F;&#x5B57;&#x7B26;&#x4E32;&#x7684;&#x679A;&#x4E3E;&#x7C7B;&#x578B;&#xFF0C;&#x652F;&#x6301;&#x4EE5;&#x4E0B;&#x914D;&#x7F6E;</li>
</ul>
<h3 id="t11.1 var (&#x9ED8;&#x8BA4;)">1.1 var (&#x9ED8;&#x8BA4;) <a href="#t11.1 var (&#x9ED8;&#x8BA4;)"> # </a></h3>
<p>&#x7F16;&#x5199;&#x7684;&#x5E93;&#x5C06;&#x901A;&#x8FC7;<code>var</code>&#x88AB;&#x8D4B;&#x503C;&#x7ED9;&#x901A;&#x8FC7;<code>library</code>&#x6307;&#x5B9A;&#x540D;&#x79F0;&#x7684;&#x53D8;&#x91CF;&#x3002;</p>
<h4 id="t21.1.1 index.js">1.1.1 index.js <a href="#t21.1.1 index.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports =  {
    add(a,b) {
        <span class="hljs-keyword">return</span> a+b;
    }
}
</code></pre>
<h4 id="t31.1.2 bundle.js">1.1.2 bundle.js <a href="#t31.1.2 bundle.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> calculator=(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{}({})
</code></pre>
<h4 id="t41.1.3 index.html">1.1.3 index.html <a href="#t41.1.3 index.html"> # </a></h4>
<pre><code class="lang-js">    &lt;script src=<span class="hljs-string">&quot;bundle.js&quot;</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
    &lt;script&gt;
        <span class="hljs-keyword">let</span> ret = calculator.add(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
        <span class="hljs-built_in">console</span>.log(ret);
    <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
</code></pre>
<h3 id="t51.2 commonjs">1.2 commonjs <a href="#t51.2 commonjs"> # </a></h3>
<p>&#x7F16;&#x5199;&#x7684;&#x5E93;&#x5C06;&#x901A;&#x8FC7; CommonJS &#x89C4;&#x8303;&#x5BFC;&#x51FA;&#x3002;</p>
<h4 id="t61.2.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;">1.2.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F; <a href="#t61.2.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js">exports[<span class="hljs-string">&quot;calculator&quot;</span>] = (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{}({})
</code></pre>
<h4 id="t71.2.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;">1.2.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F; <a href="#t71.2.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;npm-name&apos;</span>)[<span class="hljs-string">&apos;calculator&apos;</span>].add(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
</code></pre>
<blockquote>
<p>npm-name&#x662F;&#x6307;&#x6A21;&#x5757;&#x53D1;&#x5E03;&#x5230; Npm &#x4EE3;&#x7801;&#x4ED3;&#x5E93;&#x65F6;&#x7684;&#x540D;&#x79F0;</p>
</blockquote>
<h3 id="t81.3 commonjs2">1.3 commonjs2 <a href="#t81.3 commonjs2"> # </a></h3>
<p>&#x7F16;&#x5199;&#x7684;&#x5E93;&#x5C06;&#x901A;&#x8FC7; CommonJS &#x89C4;&#x8303;&#x5BFC;&#x51FA;&#x3002;</p>
<h4 id="t91.3.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;">1.3.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F; <a href="#t91.3.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{}({})
</code></pre>
<h4 id="t101.3.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;">1.3.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F; <a href="#t101.3.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;npm-name&apos;</span>).add();
</code></pre>
<blockquote>
<p>&#x5728; output.libraryTarget &#x4E3A; commonjs2 &#x65F6;&#xFF0C;&#x914D;&#x7F6E; output.library &#x5C06;&#x6CA1;&#x6709;&#x610F;&#x4E49;&#x3002;</p>
</blockquote>
<h3 id="t111.4 this">1.4 this <a href="#t111.4 this"> # </a></h3>
<p>&#x7F16;&#x5199;&#x7684;&#x5E93;&#x5C06;&#x901A;&#x8FC7; this &#x88AB;&#x8D4B;&#x503C;&#x7ED9;&#x901A;&#x8FC7; library &#x6307;&#x5B9A;&#x7684;&#x540D;&#x79F0;&#xFF0C;&#x8F93;&#x51FA;&#x548C;&#x4F7F;&#x7528;&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<h4 id="t121.4.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;">1.4.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F; <a href="#t121.4.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">this</span>[<span class="hljs-string">&quot;calculator&quot;</span>]= (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{}({})
</code></pre>
<h4 id="t131.4.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;">1.4.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F; <a href="#t131.4.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">this</span>.calculator.add();
</code></pre>
<h3 id="t141.5 window">1.5 window <a href="#t141.5 window"> # </a></h3>
<p>&#x7F16;&#x5199;&#x7684;&#x5E93;&#x5C06;&#x901A;&#x8FC7; window &#x88AB;&#x8D4B;&#x503C;&#x7ED9;&#x901A;&#x8FC7; library &#x6307;&#x5B9A;&#x7684;&#x540D;&#x79F0;&#xFF0C;&#x5373;&#x628A;&#x5E93;&#x6302;&#x8F7D;&#x5230; window &#x4E0A;&#xFF0C;&#x8F93;&#x51FA;&#x548C;&#x4F7F;&#x7528;&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<h4 id="t151.5.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;">1.5.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F; <a href="#t151.5.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">window</span>[<span class="hljs-string">&quot;calculator&quot;</span>]= (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{}({})
</code></pre>
<h4 id="t161.5.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;">1.5.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F; <a href="#t161.5.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">window</span>.calculator.add();
</code></pre>
<h3 id="t171.6 global">1.6 global <a href="#t171.6 global"> # </a></h3>
<p>&#x7F16;&#x5199;&#x7684;&#x5E93;&#x5C06;&#x901A;&#x8FC7; global &#x88AB;&#x8D4B;&#x503C;&#x7ED9;&#x901A;&#x8FC7; library &#x6307;&#x5B9A;&#x7684;&#x540D;&#x79F0;&#xFF0C;&#x5373;&#x628A;&#x5E93;&#x6302;&#x8F7D;&#x5230; global &#x4E0A;&#xFF0C;&#x8F93;&#x51FA;&#x548C;&#x4F7F;&#x7528;&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<h4 id="t181.6.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;">1.6.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F; <a href="#t181.6.1 &#x5BFC;&#x51FA;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js">global[<span class="hljs-string">&quot;calculator&quot;</span>]= (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{}({})
</code></pre>
<h4 id="t191.6.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;">1.6.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F; <a href="#t191.6.2 &#x4F7F;&#x7528;&#x65B9;&#x5F0F;"> # </a></h4>
<pre><code class="lang-js">global.calculator.add();
</code></pre>
<h2 id="t202.DLL">2.DLL <a href="#t202.DLL"> # </a></h2>
<p><code>.dll</code>&#x4E3A;&#x540E;&#x7F00;&#x7684;&#x6587;&#x4EF6;&#x79F0;&#x4E3A;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#xFF0C;&#x5728;&#x4E00;&#x4E2A;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x4E2D;&#x53EF;&#x4EE5;&#x5305;&#x542B;&#x7ED9;&#x5176;&#x4ED6;&#x6A21;&#x5757;&#x8C03;&#x7528;&#x7684;&#x51FD;&#x6570;&#x548C;&#x6570;&#x636E;</p>
<ul>
<li>&#x628A;&#x57FA;&#x7840;&#x6A21;&#x5757;&#x72EC;&#x7ACB;&#x51FA;&#x6765;&#x6253;&#x5305;&#x5230;&#x5355;&#x72EC;&#x7684;&#x52A8;&#x6001;&#x8FDE;&#x63A5;&#x5E93;&#x91CC;</li>
<li>&#x5F53;&#x9700;&#x8981;&#x5BFC;&#x5165;&#x7684;&#x6A21;&#x5757;&#x5728;&#x52A8;&#x6001;&#x8FDE;&#x63A5;&#x5E93;&#x91CC;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x6A21;&#x5757;&#x4E0D;&#x80FD;&#x518D;&#x6B21;&#x88AB;&#x6253;&#x5305;&#xFF0C;&#x800C;&#x662F;&#x53BB;&#x52A8;&#x6001;&#x8FDE;&#x63A5;&#x5E93;&#x91CC;&#x83B7;&#x53D6;</li>
<li><a href="https://webpack.js.org/plugins/dll-plugin/">dll-plugin</a></li>
</ul>
<h3 id="t212.1 &#x5B9A;&#x4E49;Dll">2.1 &#x5B9A;&#x4E49;Dll <a href="#t212.1 &#x5B9A;&#x4E49;Dll"> # </a></h3>
<ul>
<li>DllPlugin&#x63D2;&#x4EF6;&#xFF1A; &#x7528;&#x4E8E;&#x6253;&#x5305;&#x51FA;&#x4E00;&#x4E2A;&#x4E2A;&#x52A8;&#x6001;&#x8FDE;&#x63A5;&#x5E93;</li>
<li>DllReferencePlugin: &#x5728;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x4E2D;&#x5F15;&#x5165;DllPlugin&#x63D2;&#x4EF6;&#x6253;&#x5305;&#x597D;&#x7684;&#x52A8;&#x6001;&#x8FDE;&#x63A5;&#x5E93;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">const</span> DllPlugin=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack/lib/DllPlugin&apos;</span>);
<span class="hljs-built_in">module</span>.exports={
    <span class="hljs-attr">entry</span>: {
        <span class="hljs-attr">react</span>:[<span class="hljs-string">&apos;react&apos;</span>,<span class="hljs-string">&apos;react-dom&apos;</span>]
    },<span class="hljs-comment">// &#x628A; React &#x76F8;&#x5173;&#x6A21;&#x5757;&#x7684;&#x653E;&#x5230;&#x4E00;&#x4E2A;&#x5355;&#x72EC;&#x7684;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;</span>
    output: {
        <span class="hljs-attr">path</span>: path.resolve(__dirname,<span class="hljs-string">&apos;dist&apos;</span>),<span class="hljs-comment">// &#x8F93;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x90FD;&#x653E;&#x5230; dist &#x76EE;&#x5F55;&#x4E0B;</span>
        filename: <span class="hljs-string">&apos;[name].dll.js&apos;</span>,<span class="hljs-comment">//&#x8F93;&#x51FA;&#x7684;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x7684;&#x6587;&#x4EF6;&#x540D;&#x79F0;&#xFF0C;[name] &#x4EE3;&#x8868;&#x5F53;&#x524D;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x7684;&#x540D;&#x79F0;</span>
        library: <span class="hljs-string">&apos;_dll_[name]&apos;</span>,<span class="hljs-comment">//&#x5B58;&#x653E;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x7684;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x540D;&#x79F0;,&#x4F8B;&#x5982;&#x5BF9;&#x5E94; react &#x6765;&#x8BF4;&#x5C31;&#x662F; _dll_react</span>
    },
    <span class="hljs-attr">plugins</span>: [
        <span class="hljs-keyword">new</span> DllPlugin({
            <span class="hljs-comment">// &#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x7684;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x540D;&#x79F0;&#xFF0C;&#x9700;&#x8981;&#x548C; output.library &#x4E2D;&#x4FDD;&#x6301;&#x4E00;&#x81F4;</span>
            <span class="hljs-comment">// &#x8BE5;&#x5B57;&#x6BB5;&#x7684;&#x503C;&#x4E5F;&#x5C31;&#x662F;&#x8F93;&#x51FA;&#x7684; manifest.json &#x6587;&#x4EF6; &#x4E2D; name &#x5B57;&#x6BB5;&#x7684;&#x503C;</span>
            <span class="hljs-comment">// &#x4F8B;&#x5982; react.manifest.json &#x4E2D;&#x5C31;&#x6709; &quot;name&quot;: &quot;_dll_react&quot;</span>
            name: <span class="hljs-string">&apos;_dll_[name]&apos;</span>,
            <span class="hljs-comment">// &#x63CF;&#x8FF0;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x7684; manifest.json &#x6587;&#x4EF6;&#x8F93;&#x51FA;&#x65F6;&#x7684;&#x6587;&#x4EF6;&#x540D;&#x79F0;</span>
            path: path.join(__dirname, <span class="hljs-string">&apos;dist&apos;</span>, <span class="hljs-string">&apos;[name].manifest.json&apos;</span>)
        })
    ]
}
</code></pre>
<pre><code class="lang-js">webpack --config webpack.dll.config.js --mode development
</code></pre>
<h3 id="t222.2 &#x4F7F;&#x7528;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x6587;&#x4EF6;">2.2 &#x4F7F;&#x7528;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x6587;&#x4EF6; <a href="#t222.2 &#x4F7F;&#x7528;&#x52A8;&#x6001;&#x94FE;&#x63A5;&#x5E93;&#x6587;&#x4EF6;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> DllReferencePlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack/lib/DllReferencePlugin&apos;</span>)
plugins: [
  <span class="hljs-keyword">new</span> DllReferencePlugin({
    <span class="hljs-attr">manifest</span>:<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./dist/react.manifest.json&apos;</span>)
  })
]
</code></pre>
<pre><code class="lang-js">webpack --config webpack.config.js --mode development
</code></pre>
<h3 id="t232.3 html&#x4E2D;&#x4F7F;&#x7528;">2.3 html&#x4E2D;&#x4F7F;&#x7528; <a href="#t232.3 html&#x4E2D;&#x4F7F;&#x7528;"> # </a></h3>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;react.dll.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;bundle.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h2 id="t243. HappyPack">3. HappyPack <a href="#t243. HappyPack"> # </a></h2>
<ul>
<li>&#x6784;&#x5EFA;&#x9700;&#x8981;&#x89E3;&#x6790;&#x548C;&#x5904;&#x7406;&#x6587;&#x4EF6;,&#x6587;&#x4EF6;&#x8BFB;&#x5199;&#x548C;&#x8BA1;&#x7B97;&#x5BC6;&#x96C6;&#x578B;&#x7684;&#x64CD;&#x4F5C;&#x592A;&#x591A;&#x540E;&#x901F;&#x5EA6;&#x4F1A;&#x5F88;&#x6162;</li>
<li>Node.js &#x4E4B;&#x4E0A;&#x7684; Webpack &#x662F;&#x5355;&#x7EBF;&#x7A0B;&#x6A21;&#x578B;</li>
<li><a href="https://github.com/amireh/happypack">happypack</a> &#x5C31;&#x80FD;&#x8BA9;Webpack&#x628A;&#x4EFB;&#x52A1;&#x5206;&#x89E3;&#x7ED9;&#x591A;&#x4E2A;&#x5B50;&#x8FDB;&#x7A0B;&#x53BB;&#x5E76;&#x53D1;&#x7684;&#x6267;&#x884C;&#xFF0C;&#x5B50;&#x8FDB;&#x7A0B;&#x5904;&#x7406;&#x5B8C;&#x540E;&#x518D;&#x628A;&#x7ED3;&#x679C;&#x53D1;&#x9001;&#x7ED9;&#x4E3B;&#x8FDB;&#x7A0B;&#x3002;</li>
</ul>
<pre><code class="lang-js">npm i happypack@next -D
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> HappyPack = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;happypack&apos;</span>);
    rules: [
    {
        <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,
        <span class="hljs-comment">// &#x628A;&#x5BF9; .js &#x6587;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x8F6C;&#x4EA4;&#x7ED9; id &#x4E3A; babel &#x7684; HappyPack &#x5B9E;&#x4F8B;</span>
        use: [<span class="hljs-string">&apos;happypack/loader?id=babel&apos;</span>],
        <span class="hljs-attr">exclude</span>: path.resolve(__dirname, <span class="hljs-string">&apos;node_modules&apos;</span>),
    },
    {
        <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.css$/</span>,
        <span class="hljs-comment">// &#x628A;&#x5BF9; .css &#x6587;&#x4EF6;&#x7684;&#x5904;&#x7406;&#x8F6C;&#x4EA4;&#x7ED9; id &#x4E3A; css &#x7684; HappyPack &#x5B9E;&#x4F8B;</span>
        use: [<span class="hljs-string">&apos;happypack/loader?id=css&apos;</span>]
    }
]
<span class="hljs-keyword">new</span> Happypack({
            <span class="hljs-comment">//ID&#x662F;&#x6807;&#x8BC6;&#x7B26;&#x7684;&#x610F;&#x601D;&#xFF0C;ID&#x7528;&#x6765;&#x4EE3;&#x7406;&#x5F53;&#x524D;&#x7684;happypack&#x662F;&#x7528;&#x6765;&#x5904;&#x7406;&#x4E00;&#x7C7B;&#x7279;&#x5B9A;&#x7684;&#x6587;&#x4EF6;&#x7684;</span>
            id: <span class="hljs-string">&apos;js&apos;</span>,
            <span class="hljs-attr">use</span>: [{
                <span class="hljs-attr">loader</span>: <span class="hljs-string">&apos;babel-loader&apos;</span>,
                <span class="hljs-comment">//options=query&#x90FD;&#x662F;&#x5411;&#x63D2;&#x4EF6;&#x4F20;&#x9012;&#x53C2;&#x6570;&#x7684;</span>
                options: {
                    <span class="hljs-attr">presets</span>: [[<span class="hljs-string">&quot;@babel/preset-env&quot;</span>, { <span class="hljs-attr">modules</span>: <span class="hljs-literal">false</span> }], <span class="hljs-string">&quot;@babel/preset-react&quot;</span>],
                    <span class="hljs-attr">plugins</span>: [
                        [<span class="hljs-string">&quot;@babel/plugin-proposal-decorators&quot;</span>, { <span class="hljs-string">&quot;legacy&quot;</span>: <span class="hljs-literal">true</span> }],
                        [<span class="hljs-string">&quot;@babel/plugin-proposal-class-properties&quot;</span>, { <span class="hljs-string">&quot;loose&quot;</span>: <span class="hljs-literal">true</span> }],
                    ]
                }
            }]
        }),
        <span class="hljs-keyword">new</span> Happypack({
            <span class="hljs-comment">//ID&#x662F;&#x6807;&#x8BC6;&#x7B26;&#x7684;&#x610F;&#x601D;&#xFF0C;ID&#x7528;&#x6765;&#x4EE3;&#x7406;&#x5F53;&#x524D;&#x7684;happypack&#x662F;&#x7528;&#x6765;&#x5904;&#x7406;&#x4E00;&#x7C7B;&#x7279;&#x5B9A;&#x7684;&#x6587;&#x4EF6;&#x7684;</span>
            id: <span class="hljs-string">&apos;css&apos;</span>,
            <span class="hljs-attr">use</span>: [MiniCssExtractPlugin.loader, <span class="hljs-string">&apos;css-loader&apos;</span>, <span class="hljs-string">&apos;postcss-loader&apos;</span>],
            <span class="hljs-attr">threads</span>: <span class="hljs-number">4</span>,<span class="hljs-comment">//&#x4F60;&#x8981;&#x5F00;&#x542F;&#x591A;&#x5C11;&#x4E2A;&#x5B50;&#x8FDB;&#x7A0B;&#x53BB;&#x5904;&#x7406;&#x8FD9;&#x4E00;&#x7C7B;&#x578B;&#x7684;&#x6587;&#x4EF6;</span>
            verbose: <span class="hljs-literal">true</span><span class="hljs-comment">//&#x662F;&#x5426;&#x8981;&#x8F93;&#x51FA;&#x8BE6;&#x7EC6;&#x7684;&#x65E5;&#x5FD7; verbose</span>
        })
</code></pre>
<h2 id="t254. CDN">4. CDN <a href="#t254. CDN"> # </a></h2>
<p>CDN &#x53C8;&#x53EB;&#x5185;&#x5BB9;&#x5206;&#x53D1;&#x7F51;&#x7EDC;&#xFF0C;&#x901A;&#x8FC7;&#x628A;&#x8D44;&#x6E90;&#x90E8;&#x7F72;&#x5230;&#x4E16;&#x754C;&#x5404;&#x5730;&#xFF0C;&#x7528;&#x6237;&#x5728;&#x8BBF;&#x95EE;&#x65F6;&#x6309;&#x7167;&#x5C31;&#x8FD1;&#x539F;&#x5219;&#x4ECE;&#x79BB;&#x7528;&#x6237;&#x6700;&#x8FD1;&#x7684;&#x670D;&#x52A1;&#x5668;&#x83B7;&#x53D6;&#x8D44;&#x6E90;&#xFF0C;&#x4ECE;&#x800C;&#x52A0;&#x901F;&#x8D44;&#x6E90;&#x7684;&#x83B7;&#x53D6;&#x901F;&#x5EA6;&#x3002;</p>
<p><img src="https://laod.cn/wp-content/uploads/2016/06/cnd.gif" alt="cnd"></p>
<ul>
<li>HTML&#x6587;&#x4EF6;&#x4E0D;&#x7F13;&#x5B58;&#xFF0C;&#x653E;&#x5728;&#x81EA;&#x5DF1;&#x7684;&#x670D;&#x52A1;&#x5668;&#x4E0A;&#xFF0C;&#x5173;&#x95ED;&#x81EA;&#x5DF1;&#x670D;&#x52A1;&#x5668;&#x7684;&#x7F13;&#x5B58;&#xFF0C;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x7684;URL&#x53D8;&#x6210;&#x6307;&#x5411;CDN&#x670D;&#x52A1;&#x5668;&#x7684;&#x5730;&#x5740;</li>
<li>&#x9759;&#x6001;&#x7684;JavaScript&#x3001;CSS&#x3001;&#x56FE;&#x7247;&#x7B49;&#x6587;&#x4EF6;&#x5F00;&#x542F;CDN&#x548C;&#x7F13;&#x5B58;&#xFF0C;&#x5E76;&#x4E14;&#x6587;&#x4EF6;&#x540D;&#x5E26;&#x4E0A;HASH&#x503C;</li>
<li>&#x4E3A;&#x4E86;&#x5E76;&#x884C;&#x52A0;&#x8F7D;&#x4E0D;&#x963B;&#x585E;&#xFF0C;&#x628A;&#x4E0D;&#x540C;&#x7684;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x5206;&#x914D;&#x5230;&#x4E0D;&#x540C;&#x7684;CDN&#x670D;&#x52A1;&#x5668;&#x4E0A;</li>
</ul>
<h3 id="t264.1 &#x4F7F;&#x7528;&#x7F13;&#x5B58;">4.1 &#x4F7F;&#x7528;&#x7F13;&#x5B58; <a href="#t264.1 &#x4F7F;&#x7528;&#x7F13;&#x5B58;"> # </a></h3>
<ul>
<li>&#x7531;&#x4E8E; CDN &#x670D;&#x52A1;&#x4E00;&#x822C;&#x90FD;&#x4F1A;&#x7ED9;&#x8D44;&#x6E90;&#x5F00;&#x542F;&#x5F88;&#x957F;&#x65F6;&#x95F4;&#x7684;&#x7F13;&#x5B58;&#xFF0C;&#x4F8B;&#x5982;&#x7528;&#x6237;&#x4ECE; CDN &#x4E0A;&#x83B7;&#x53D6;&#x5230;&#x4E86; index.html &#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#x540E;&#xFF0C; &#x5373;&#x4F7F;&#x4E4B;&#x540E;&#x7684;&#x53D1;&#x5E03;&#x64CD;&#x4F5C;&#x628A; index.html &#x6587;&#x4EF6;&#x7ED9;&#x91CD;&#x65B0;&#x8986;&#x76D6;&#x4E86;&#xFF0C;&#x4F46;&#x662F;&#x7528;&#x6237;&#x5728;&#x5F88;&#x957F;&#x4E00;&#x6BB5;&#x65F6;&#x95F4;&#x5185;&#x8FD8;&#x662F;&#x8FD0;&#x884C;&#x7684;&#x4E4B;&#x524D;&#x7684;&#x7248;&#x672C;&#xFF0C;&#x8FD9;&#x4F1A;&#x65B0;&#x7684;&#x5BFC;&#x81F4;&#x53D1;&#x5E03;&#x4E0D;&#x80FD;&#x7ACB;&#x5373;&#x751F;&#x6548;
&#x89E3;&#x51B3;&#x529E;&#x6CD5;</li>
<li>&#x9488;&#x5BF9; HTML &#x6587;&#x4EF6;&#xFF1A;&#x4E0D;&#x5F00;&#x542F;&#x7F13;&#x5B58;&#xFF0C;&#x628A; HTML &#x653E;&#x5230;&#x81EA;&#x5DF1;&#x7684;&#x670D;&#x52A1;&#x5668;&#x4E0A;&#xFF0C;&#x800C;&#x4E0D;&#x662F; CDN &#x670D;&#x52A1;&#x4E0A;&#xFF0C;&#x540C;&#x65F6;&#x5173;&#x95ED;&#x81EA;&#x5DF1;&#x670D;&#x52A1;&#x5668;&#x4E0A;&#x7684;&#x7F13;&#x5B58;&#x3002;&#x81EA;&#x5DF1;&#x7684;&#x670D;&#x52A1;&#x5668;&#x53EA;&#x63D0;&#x4F9B; HTML &#x6587;&#x4EF6;&#x548C;&#x6570;&#x636E;&#x63A5;&#x53E3;&#x3002;</li>
<li>&#x9488;&#x5BF9;&#x9759;&#x6001;&#x7684; JavaScript&#x3001;CSS&#x3001;&#x56FE;&#x7247;&#x7B49;&#x6587;&#x4EF6;&#xFF1A;&#x5F00;&#x542F; CDN &#x548C;&#x7F13;&#x5B58;&#xFF0C;&#x4E0A;&#x4F20;&#x5230; CDN &#x670D;&#x52A1;&#x4E0A;&#x53BB;&#xFF0C;&#x540C;&#x65F6;&#x7ED9;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x540D;&#x5E26;&#x4E0A;&#x7531;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x7B97;&#x51FA;&#x7684; Hash &#x503C;</li>
<li>&#x5E26;&#x4E0A; Hash &#x503C;&#x7684;&#x539F;&#x56E0;&#x662F;&#x6587;&#x4EF6;&#x540D;&#x4F1A;&#x968F;&#x7740;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x800C;&#x53D8;&#x5316;&#xFF0C;&#x53EA;&#x8981;&#x6587;&#x4EF6;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x5176;&#x5BF9;&#x5E94;&#x7684; URL &#x5C31;&#x4F1A;&#x53D8;&#x5316;&#xFF0C;&#x5B83;&#x5C31;&#x4F1A;&#x88AB;&#x91CD;&#x65B0;&#x4E0B;&#x8F7D;&#xFF0C;&#x65E0;&#x8BBA;&#x7F13;&#x5B58;&#x65F6;&#x95F4;&#x6709;&#x591A;&#x957F;&#x3002;</li>
<li>&#x542F;&#x7528;CDN&#x4E4B;&#x540E; &#x76F8;&#x5BF9;&#x8DEF;&#x5F84;&#xFF0C;&#x90FD;&#x53D8;&#x6210;&#x4E86;&#x7EDD;&#x5BF9;&#x7684;&#x6307;&#x5411; CDN &#x670D;&#x52A1;&#x7684; URL &#x5730;&#x5740;</li>
</ul>
<h3 id="t274.2 &#x57DF;&#x540D;&#x9650;&#x5236;">4.2 &#x57DF;&#x540D;&#x9650;&#x5236; <a href="#t274.2 &#x57DF;&#x540D;&#x9650;&#x5236;"> # </a></h3>
<ul>
<li>&#x540C;&#x4E00;&#x65F6;&#x523B;&#x9488;&#x5BF9;&#x540C;&#x4E00;&#x4E2A;&#x57DF;&#x540D;&#x7684;&#x8D44;&#x6E90;&#x5E76;&#x884C;&#x8BF7;&#x6C42;&#x662F;&#x6709;&#x9650;&#x5236;</li>
<li>&#x53EF;&#x4EE5;&#x628A;&#x8FD9;&#x4E9B;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x5206;&#x6563;&#x5230;&#x4E0D;&#x540C;&#x7684; CDN &#x670D;&#x52A1;&#x4E0A;&#x53BB;</li>
<li>&#x591A;&#x4E2A;&#x57DF;&#x540D;&#x540E;&#x4F1A;&#x589E;&#x52A0;&#x57DF;&#x540D;&#x89E3;&#x6790;&#x65F6;&#x95F4;</li>
<li>&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x5728; HTML HEAD &#x6807;&#x7B7E;&#x4E2D; &#x52A0;&#x5165;<code>&lt;link rel=&quot;dns-prefetch&quot; href=&quot;&quot;&gt;</code>&#x53BB;&#x9884;&#x89E3;&#x6790;&#x57DF;&#x540D;&#xFF0C;&#x4EE5;&#x964D;&#x4F4E;&#x57DF;&#x540D;&#x89E3;&#x6790;&#x5E26;&#x6765;&#x7684;&#x5EF6;&#x8FDF;</li>
</ul>
<h3 id="t284.3 &#x63A5;&#x5165;CDN">4.3 &#x63A5;&#x5165;CDN <a href="#t284.3 &#x63A5;&#x5165;CDN"> # </a></h3>
<p>&#x8981;&#x7ED9;&#x7F51;&#x7AD9;&#x63A5;&#x5165; CDN&#xFF0C;&#x9700;&#x8981;&#x628A;&#x7F51;&#x9875;&#x7684;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x4E0A;&#x4F20;&#x5230; CDN &#x670D;&#x52A1;&#x4E0A;&#x53BB;&#xFF0C;&#x5728;&#x670D;&#x52A1;&#x8FD9;&#x4E9B;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x7684;&#x65F6;&#x5019;&#x9700;&#x8981;&#x901A;&#x8FC7; CDN &#x670D;&#x52A1;&#x63D0;&#x4F9B;&#x7684; URL &#x5730;&#x5740;&#x53BB;&#x8BBF;&#x95EE;</p>
<pre><code class="lang-diff">    output: {
        path: path.resolve(__dirname, &apos;dist&apos;),
<span class="hljs-addition">+        filename: &apos;[name]_[hash:8].js&apos;,</span>
<span class="hljs-addition">+        publicPath: &apos;http://img.zhufengpeixun.cn&apos;</span>
    },
</code></pre>
<h2 id="t295.Tree Shaking">5.Tree Shaking <a href="#t295.Tree Shaking"> # </a></h2>
<p><code>Tree Shaking</code> &#x53EF;&#x4EE5;&#x7528;&#x6765;&#x5254;&#x9664;<code>JavaScript</code>&#x4E2D;&#x7528;&#x4E0D;&#x4E0A;&#x7684;&#x6B7B;&#x4EE3;&#x7801;&#x3002;&#x5B83;&#x4F9D;&#x8D56;&#x9759;&#x6001;&#x7684;<code>ES6</code>&#x6A21;&#x5757;&#x5316;&#x8BED;&#x6CD5;&#xFF0C;&#x4F8B;&#x5982;&#x901A;&#x8FC7;<code>import</code>&#x548C;<code>export</code>&#x5BFC;&#x5165;&#x5BFC;&#x51FA;&#x3002;</p>
<h3 id="t305.1 &#x666E;&#x901A;&#x60C5;&#x51B5;">5.1 &#x666E;&#x901A;&#x60C5;&#x51B5; <a href="#t305.1 &#x666E;&#x901A;&#x60C5;&#x51B5;"> # </a></h3>
<p>calc.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">a,b</span>)</span>{
   <span class="hljs-keyword">return</span> a + b;
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">minus</span>(<span class="hljs-params">a,b</span>)</span>{
   <span class="hljs-keyword">return</span> a - b;
}
</code></pre>
<p>index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {add} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./calc&apos;</span>;
add(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>)
</code></pre>
<p>calc.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">a,b</span>)</span>{
   <span class="hljs-keyword">return</span> a + b;
}
</code></pre>
<p>&#x7531;&#x4E8E;&#x53EA;&#x7528;&#x5230;&#x4E86; calc.js &#x4E2D;&#x7684; add&#xFF0C;&#x6240;&#x4EE5;&#x5269;&#x4E0B;&#x7684;&#x90FD;&#x88AB; Tree Shaking &#x5F53;&#x4F5C;&#x6B7B;&#x4EE3;&#x7801;&#x7ED9;&#x5254;&#x9664;&#x4E86;</p>
<h3 id="t315.2 &#x4E0D;&#x8981;&#x7F16;&#x8BD1;ES6&#x6A21;&#x5757;">5.2 &#x4E0D;&#x8981;&#x7F16;&#x8BD1;ES6&#x6A21;&#x5757; <a href="#t315.2 &#x4E0D;&#x8981;&#x7F16;&#x8BD1;ES6&#x6A21;&#x5757;"> # </a></h3>
<ul>
<li>&#x8981;&#x8BA9; Tree Shaking &#x6B63;&#x5E38;&#x5DE5;&#x4F5C;&#x7684;&#x524D;&#x63D0;&#x662F;&#x4EA4;&#x7ED9; Webpack &#x7684; JavaScript &#x4EE3;&#x7801;&#x5FC5;&#x987B;&#x662F;&#x91C7;&#x7528; ES6 &#x6A21;&#x5757;&#x5316;&#x8BED;&#x6CD5;&#x7684;</li>
<li>&#x5BF9;&#x4E8E; <code>module.export</code> Webpack &#x65E0;&#x6CD5;&#x5206;&#x6790;&#x51FA;&#x54EA;&#x4E9B;&#x4EE3;&#x7801;&#x53EF;&#x4EE5;&#x5254;&#x9664;</li>
<li><code>&quot;modules&quot;: false</code> &#x7684;&#x542B;&#x4E49;&#x662F;&#x5173;&#x95ED; Babel &#x7684;&#x6A21;&#x5757;&#x8F6C;&#x6362;&#x529F;&#x80FD;&#xFF0C;&#x4FDD;&#x7559;&#x539F;&#x672C;&#x7684; ES6 &#x6A21;&#x5757;&#x5316;&#x8BED;&#x6CD5;&#x3002;</li>
</ul>
<pre><code class="lang-diff">    use:[{
        loader: &apos;babel-loader&apos;,
            options: {
<span class="hljs-addition">+                presets:[[&apos;@babel/preset-env&apos;,{modules: false }],&apos;@babel/preset-react&apos;]</span>
        }
    }]
</code></pre>
<h3 id="t325.3 &#x663E;&#x793A;&#x672A;&#x4F7F;&#x7528;&#x7684;&#x5BFC;&#x51FA;&#x5B9E;&#x4F8B;">5.3 &#x663E;&#x793A;&#x672A;&#x4F7F;&#x7528;&#x7684;&#x5BFC;&#x51FA;&#x5B9E;&#x4F8B; <a href="#t325.3 &#x663E;&#x793A;&#x672A;&#x4F7F;&#x7528;&#x7684;&#x5BFC;&#x51FA;&#x5B9E;&#x4F8B;"> # </a></h3>
<pre><code class="lang-js">npx webpack --display-used-exports
</code></pre>
<h3 id="t335.4 &#x5254;&#x9664;&#x7528;&#x4E0D;&#x4E0A;&#x7684;&#x4EE3;&#x7801;">5.4 &#x5254;&#x9664;&#x7528;&#x4E0D;&#x4E0A;&#x7684;&#x4EE3;&#x7801; <a href="#t335.4 &#x5254;&#x9664;&#x7528;&#x4E0D;&#x4E0A;&#x7684;&#x4EE3;&#x7801;"> # </a></h3>
<ul>
<li>Webpack&#x53EA;&#x662F;&#x5206;&#x6790;&#x51FA;&#x4E86;&#x54EA;&#x4E9B;&#x51FD;&#x6570;&#x7528;&#x4E0A;&#x4E86;&#x54EA;&#x4E9B;&#x6CA1;&#x7528;&#x4E0A;&#xFF0C;&#x8981;&#x5254;&#x9664;&#x7528;&#x4E0D;&#x4E0A;&#x7684;&#x4EE3;&#x7801;&#x8FD8;&#x5F97;&#x7ECF;&#x8FC7;<code>UglifyJS</code>&#x53BB;&#x5904;&#x7406;</li>
</ul>
<pre><code class="lang-js">webpack --display-used-exports --optimize-minimize
</code></pre>
<h3 id="t345.5 &#x542F;&#x7528;&#x538B;&#x7F29;">5.5 &#x542F;&#x7528;&#x538B;&#x7F29; <a href="#t345.5 &#x542F;&#x7528;&#x538B;&#x7F29;"> # </a></h3>
<pre><code class="lang-js">optimization: {
      <span class="hljs-attr">minimizer</span>: [
             <span class="hljs-keyword">new</span> UglifyJsPlugin({
                 <span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//&#x542F;&#x52A8;&#x7F13;&#x5B58;</span>
                 parallel: <span class="hljs-literal">true</span>,<span class="hljs-comment">//&#x542F;&#x52A8;&#x5E76;&#x884C;&#x538B;&#x7F29;</span>
                 <span class="hljs-comment">//&#x5982;&#x679C;&#x4E3A;true&#x7684;&#x8BDD;&#xFF0C;&#x53EF;&#x4EE5;&#x83B7;&#x5F97;sourcemap</span>
                 sourceMap: <span class="hljs-literal">true</span> <span class="hljs-comment">// set to true if you want JS source maps</span>
             }),
             <span class="hljs-comment">//&#x538B;&#x7F29;css&#x8D44;&#x6E90;&#x7684;</span>
             <span class="hljs-keyword">new</span> OptimizeCSSAssetsPlugin({})
         ]
}
</code></pre>
<h3 id="t355.5 &#x6DF1;&#x5EA6;&#x5206;&#x6790;">5.5 &#x6DF1;&#x5EA6;&#x5206;&#x6790; <a href="#t355.5 &#x6DF1;&#x5EA6;&#x5206;&#x6790;"> # </a></h3>
<ul>
<li><a href="https://github.com/vincentdchan/webpack-deep-scope-analysis-plugin">webpack-deep-scope-analysis-plugin</a></li>
</ul>
<p><img src="http://img.zhufengpeixun.cn/webpack-deep-scope-analysis-plugin.jpeg" alt="webpack-deep-scope-analysis-plugin"></p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> _ <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;lodash-es&apos;</span>;
<span class="hljs-comment">//&#x52A0;&#x6CD5;</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isArray</span>(<span class="hljs-params">value</span>) </span>{
    <span class="hljs-keyword">return</span> _.isArray(value);
}
<span class="hljs-comment">//&#x51CF;&#x6CD5;</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">a, b</span>) </span>{
    <span class="hljs-keyword">return</span> a + b + _.isArray([]);
}
<span class="hljs-keyword">export</span> {
    isArray,
    add
}
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> WebpackDeepScopeAnalysisPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack-deep-scope-plugin&apos;</span>).default;

<span class="hljs-built_in">module</span>.export = {
  <span class="hljs-attr">plugins</span>: [
    ...,
    <span class="hljs-keyword">new</span> WebpackDeepScopeAnalysisPlugin(),
  ],
}
</code></pre>
<h2 id="t366.&#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801;">6.&#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801; <a href="#t366.&#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801;"> # </a></h2>
<h3 id="t376.1 &#x4E3A;&#x4EC0;&#x4E48;&#x9700;&#x8981;&#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801;">6.1 &#x4E3A;&#x4EC0;&#x4E48;&#x9700;&#x8981;&#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801; <a href="#t376.1 &#x4E3A;&#x4EC0;&#x4E48;&#x9700;&#x8981;&#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801;"> # </a></h3>
<p>&#x5927;&#x7F51;&#x7AD9;&#x6709;&#x591A;&#x4E2A;&#x9875;&#x9762;&#xFF0C;&#x6BCF;&#x4E2A;&#x9875;&#x9762;&#x7531;&#x4E8E;&#x91C7;&#x7528;&#x76F8;&#x540C;&#x6280;&#x672F;&#x6808;&#x548C;&#x6837;&#x5F0F;&#x4EE3;&#x7801;&#xFF0C;&#x4F1A;&#x5305;&#x542B;&#x5F88;&#x591A;&#x516C;&#x5171;&#x4EE3;&#x7801;&#xFF0C;&#x5982;&#x679C;&#x90FD;&#x5305;&#x542B;&#x8FDB;&#x6765;&#x4F1A;&#x6709;&#x95EE;&#x9898;</p>
<ul>
<li>&#x76F8;&#x540C;&#x7684;&#x8D44;&#x6E90;&#x88AB;&#x91CD;&#x590D;&#x7684;&#x52A0;&#x8F7D;&#xFF0C;&#x6D6A;&#x8D39;&#x7528;&#x6237;&#x7684;&#x6D41;&#x91CF;&#x548C;&#x670D;&#x52A1;&#x5668;&#x7684;&#x6210;&#x672C;&#xFF1B;</li>
<li>&#x6BCF;&#x4E2A;&#x9875;&#x9762;&#x9700;&#x8981;&#x52A0;&#x8F7D;&#x7684;&#x8D44;&#x6E90;&#x592A;&#x5927;&#xFF0C;&#x5BFC;&#x81F4;&#x7F51;&#x9875;&#x9996;&#x5C4F;&#x52A0;&#x8F7D;&#x7F13;&#x6162;&#xFF0C;&#x5F71;&#x54CD;&#x7528;&#x6237;&#x4F53;&#x9A8C;&#x3002;
&#x5982;&#x679C;&#x80FD;&#x628A;&#x516C;&#x5171;&#x4EE3;&#x7801;&#x62BD;&#x79BB;&#x6210;&#x5355;&#x72EC;&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x52A0;&#x8F7D;&#x80FD;&#x8FDB;&#x884C;&#x4F18;&#x5316;&#xFF0C;&#x53EF;&#x4EE5;&#x51CF;&#x5C11;&#x7F51;&#x7EDC;&#x4F20;&#x8F93;&#x6D41;&#x91CF;&#xFF0C;&#x964D;&#x4F4E;&#x670D;&#x52A1;&#x5668;&#x6210;&#x672C;</li>
</ul>
<h3 id="t386.2 &#x5982;&#x4F55;&#x63D0;&#x53D6;">6.2 &#x5982;&#x4F55;&#x63D0;&#x53D6; <a href="#t386.2 &#x5982;&#x4F55;&#x63D0;&#x53D6;"> # </a></h3>
<ul>
<li>&#x57FA;&#x7840;&#x7C7B;&#x5E93;&#xFF0C;&#x65B9;&#x4FBF;&#x957F;&#x671F;&#x7F13;&#x5B58;</li>
<li>&#x9875;&#x9762;&#x4E4B;&#x95F4;&#x7684;&#x516C;&#x7528;&#x4EE3;&#x7801;</li>
<li>&#x5404;&#x4E2A;&#x9875;&#x9762;&#x5355;&#x72EC;&#x751F;&#x6210;&#x6587;&#x4EF6;</li>
<li><a href="https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk">common-chunk-and-vendor-chunk</a></li>
</ul>
<h3 id="t396.3 &#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801;">6.3 &#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801; <a href="#t396.3 &#x63D0;&#x53D6;&#x516C;&#x5171;&#x4EE3;&#x7801;"> # </a></h3>
<p>pageA.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> utility1 <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./utility1&apos;</span>;
<span class="hljs-keyword">import</span> utility2 <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./utility2&apos;</span>;
<span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;jquery&apos;</span>;
</code></pre>
<p>pageB.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> utility2 <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./utility1&apos;</span>;
<span class="hljs-keyword">import</span> utility3 <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./utility2&apos;</span>;
<span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;jquery&apos;</span>;
</code></pre>
<p>pageC.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> utility2 <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./utility3&apos;</span>;
<span class="hljs-keyword">import</span> utility3 <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./utility1&apos;</span>;
<span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;jquery&apos;</span>;
</code></pre>
<pre><code class="lang-js">    entry: {
        <span class="hljs-attr">pageA</span>: <span class="hljs-string">&apos;./src/pageA&apos;</span>,
        <span class="hljs-attr">pageB</span>: <span class="hljs-string">&apos;./src/pageB&apos;</span>,
        <span class="hljs-attr">pageC</span>: <span class="hljs-string">&apos;./src/pageC&apos;</span>
    },
    <span class="hljs-attr">output</span>: {
        <span class="hljs-attr">path</span>: path.resolve(__dirname,<span class="hljs-string">&apos;dist&apos;</span>),
        <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;[name].js&apos;</span>
    },
    <span class="hljs-attr">optimization</span>: {
        <span class="hljs-attr">splitChunks</span>: {
            <span class="hljs-attr">cacheGroups</span>: {
                <span class="hljs-attr">commons</span>: {
                    <span class="hljs-attr">chunks</span>: <span class="hljs-string">&quot;initial&quot;</span>,
                              <span class="hljs-attr">minChunks</span>: <span class="hljs-number">2</span>,<span class="hljs-comment">//&#x6700;&#x5C0F;&#x91CD;&#x590D;&#x7684;&#x6B21;&#x6570;</span>
                              minSize: <span class="hljs-number">0</span><span class="hljs-comment">//&#x6700;&#x5C0F;&#x63D0;&#x53D6;&#x5B57;&#x8282;&#x6570;</span>
                },
                <span class="hljs-attr">vendor</span>: {
                    <span class="hljs-attr">test</span>: <span class="hljs-regexp">/node_modules/</span>,
                    <span class="hljs-attr">chunks</span>: <span class="hljs-string">&quot;initial&quot;</span>,
                    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;vendor&quot;</span>,
                }
            }
        }
    }

    plugins:[
       <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
            <span class="hljs-attr">template</span>: <span class="hljs-string">&apos;./src/index.html&apos;</span>,
            <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;pageA.html&apos;</span>,
            <span class="hljs-attr">chunks</span>: [<span class="hljs-string">&apos;pageA&apos;</span>],
            <span class="hljs-attr">minify</span>: {
                <span class="hljs-attr">removeAttributeQuotes</span>: <span class="hljs-literal">true</span>
            }
        }),
        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
            <span class="hljs-attr">template</span>: <span class="hljs-string">&apos;./src/index.html&apos;</span>,
            <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;pageB.html&apos;</span>,
            <span class="hljs-attr">chunks</span>: [<span class="hljs-string">&apos;pageB&apos;</span>],
            <span class="hljs-attr">minify</span>: {
                <span class="hljs-attr">removeAttributeQuotes</span>: <span class="hljs-literal">true</span>
            }
        }),
        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
            <span class="hljs-attr">template</span>: <span class="hljs-string">&apos;./src/index.html&apos;</span>,
            <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;pageC.html&apos;</span>,
            <span class="hljs-attr">chunks</span>: [<span class="hljs-string">&apos;pageC&apos;</span>],
            <span class="hljs-attr">minify</span>: {
                <span class="hljs-attr">removeAttributeQuotes</span>: <span class="hljs-literal">true</span>
            }
        })
    ]
</code></pre>
<h2 id="t407.&#x5F00;&#x542F; Scope Hoisting">7.&#x5F00;&#x542F; Scope Hoisting <a href="#t407.&#x5F00;&#x542F; Scope Hoisting"> # </a></h2>
<p>Scope Hoisting &#x53EF;&#x4EE5;&#x8BA9; Webpack &#x6253;&#x5305;&#x51FA;&#x6765;&#x7684;&#x4EE3;&#x7801;&#x6587;&#x4EF6;&#x66F4;&#x5C0F;&#x3001;&#x8FD0;&#x884C;&#x7684;&#x66F4;&#x5FEB;&#xFF0C; &#x5B83;&#x53C8;&#x8BD1;&#x4F5C; &quot;&#x4F5C;&#x7528;&#x57DF;&#x63D0;&#x5347;&quot;&#xFF0C;&#x662F;&#x5728; Webpack3 &#x4E2D;&#x65B0;&#x63A8;&#x51FA;&#x7684;&#x529F;&#x80FD;&#x3002;</p>
<ul>
<li>&#x4EE3;&#x7801;&#x4F53;&#x79EF;&#x66F4;&#x5C0F;&#xFF0C;&#x56E0;&#x4E3A;&#x51FD;&#x6570;&#x7533;&#x660E;&#x8BED;&#x53E5;&#x4F1A;&#x4EA7;&#x751F;&#x5927;&#x91CF;&#x4EE3;&#x7801;</li>
<li>&#x4EE3;&#x7801;&#x5728;&#x8FD0;&#x884C;&#x65F6;&#x56E0;&#x4E3A;&#x521B;&#x5EFA;&#x7684;&#x51FD;&#x6570;&#x4F5C;&#x7528;&#x57DF;&#x66F4;&#x5C11;&#x4E86;&#xFF0C;&#x5185;&#x5B58;&#x5F00;&#x9500;&#x4E5F;&#x968F;&#x4E4B;&#x53D8;&#x5C0F;</li>
</ul>
<h3 id="t417.1 &#x63D2;&#x4EF6;&#x914D;&#x7F6E;">7.1 &#x63D2;&#x4EF6;&#x914D;&#x7F6E; <a href="#t417.1 &#x63D2;&#x4EF6;&#x914D;&#x7F6E;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> ModuleConcatenationPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack/lib/optimize/ModuleConcatenationPlugin&apos;</span>);
<span class="hljs-built_in">module</span>.exports = {
  <span class="hljs-attr">resolve</span>: {
    <span class="hljs-comment">// &#x9488;&#x5BF9; Npm &#x4E2D;&#x7684;&#x7B2C;&#x4E09;&#x65B9;&#x6A21;&#x5757;&#x4F18;&#x5148;&#x91C7;&#x7528; jsnext:main &#x4E2D;&#x6307;&#x5411;&#x7684; ES6 &#x6A21;&#x5757;&#x5316;&#x8BED;&#x6CD5;&#x7684;&#x6587;&#x4EF6;</span>
    mainFields: [<span class="hljs-string">&apos;jsnext:main&apos;</span>, <span class="hljs-string">&apos;browser&apos;</span>, <span class="hljs-string">&apos;main&apos;</span>]
  },
  <span class="hljs-attr">plugins</span>: [
    <span class="hljs-comment">// &#x5F00;&#x542F; Scope Hoisting</span>
    <span class="hljs-keyword">new</span> ModuleConcatenationPlugin(),
  ],
};
</code></pre>
<h3 id="t427.2 &#x4EE3;&#x7801;">7.2 &#x4EE3;&#x7801; <a href="#t427.2 &#x4EE3;&#x7801;"> # </a></h3>
<p>hello.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-string">&apos;Hello&apos;</span>;
</code></pre>
<p>index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> str <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./hello.js&apos;</span>;
<span class="hljs-built_in">console</span>.log(str);
</code></pre>
<p>&#x8F93;&#x51FA;&#x7684;&#x7ED3;&#x679C;main.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> n = name = <span class="hljs-string">&quot;zfpx&quot;</span>;
  <span class="hljs-built_in">console</span>.log(n)
</code></pre>
<blockquote>
<p>&#x51FD;&#x6570;&#x7531;&#x4E24;&#x4E2A;&#x53D8;&#x6210;&#x4E86;&#x4E00;&#x4E2A;&#xFF0C;hello.js &#x4E2D;&#x5B9A;&#x4E49;&#x7684;&#x5185;&#x5BB9;&#x88AB;&#x76F4;&#x63A5;&#x6CE8;&#x5165;&#x5230;&#x4E86; main.js &#x4E2D;</p>
</blockquote>
<h2 id="t438.&#x52A8;&#x6001;&#x5BFC;&#x5165;&#x548C;&#x61D2;&#x52A0;&#x8F7D;">8.&#x52A8;&#x6001;&#x5BFC;&#x5165;&#x548C;&#x61D2;&#x52A0;&#x8F7D; <a href="#t438.&#x52A8;&#x6001;&#x5BFC;&#x5165;&#x548C;&#x61D2;&#x52A0;&#x8F7D;"> # </a></h2>
<p>&#x7528;&#x6237;&#x5F53;&#x524D;&#x9700;&#x8981;&#x7528;&#x4EC0;&#x4E48;&#x529F;&#x80FD;&#x5C31;&#x53EA;&#x52A0;&#x8F7D;&#x8FD9;&#x4E2A;&#x529F;&#x80FD;&#x5BF9;&#x5E94;&#x7684;&#x4EE3;&#x7801;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x6240;&#x8C13;&#x7684;&#x6309;&#x9700;&#x52A0;&#x8F7D;
&#x5728;&#x7ED9;&#x5355;&#x9875;&#x5E94;&#x7528;&#x505A;&#x6309;&#x9700;&#x52A0;&#x8F7D;&#x4F18;&#x5316;&#x65F6;&#xFF0C;&#x4E00;&#x822C;&#x91C7;&#x7528;&#x4EE5;&#x4E0B;&#x539F;&#x5219;&#xFF1A;</p>
<ul>
<li>&#x5BF9;&#x7F51;&#x7AD9;&#x529F;&#x80FD;&#x8FDB;&#x884C;&#x5212;&#x5206;&#xFF0C;&#x6BCF;&#x4E00;&#x7C7B;&#x4E00;&#x4E2A;chunk</li>
<li>&#x5BF9;&#x4E8E;&#x9996;&#x6B21;&#x6253;&#x5F00;&#x9875;&#x9762;&#x9700;&#x8981;&#x7684;&#x529F;&#x80FD;&#x76F4;&#x63A5;&#x52A0;&#x8F7D;&#xFF0C;&#x5C3D;&#x5FEB;&#x5C55;&#x793A;&#x7ED9;&#x7528;&#x6237;</li>
<li>&#x67D0;&#x4E9B;&#x4F9D;&#x8D56;&#x5927;&#x91CF;&#x4EE3;&#x7801;&#x7684;&#x529F;&#x80FD;&#x70B9;&#x53EF;&#x4EE5;&#x6309;&#x9700;&#x52A0;&#x8F7D;</li>
<li>&#x88AB;&#x5206;&#x5272;&#x51FA;&#x53BB;&#x7684;&#x4EE3;&#x7801;&#x9700;&#x8981;&#x4E00;&#x4E2A;&#x6309;&#x9700;&#x52A0;&#x8F7D;&#x7684;&#x65F6;&#x673A;</li>
</ul>
<h3 id="t448.1 &#x52A8;&#x6001;&#x5BFC;&#x5165;&#x548C;&#x61D2;&#x52A0;&#x8F7D;">8.1 &#x52A8;&#x6001;&#x5BFC;&#x5165;&#x548C;&#x61D2;&#x52A0;&#x8F7D; <a href="#t448.1 &#x52A8;&#x6001;&#x5BFC;&#x5165;&#x548C;&#x61D2;&#x52A0;&#x8F7D;"> # </a></h3>
<h4 id="t458.1.1  handler.js">8.1.1  handler.js <a href="#t458.1.1  handler.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    alert(<span class="hljs-string">&apos;&#x4F60;&#x70B9;&#x6211;&#x5566;!&apos;</span>);
}
</code></pre>
<h4 id="t468.1.2 index.js">8.1.2 index.js <a href="#t468.1.2 index.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#clickBtn&apos;</span>).addEventListener(<span class="hljs-string">&apos;mouseover&apos;</span>,() =&gt; {
    <span class="hljs-keyword">import</span>(<span class="hljs-string">&apos;./handler&apos;</span>).then(<span class="hljs-function"><span class="hljs-params">clickMe</span> =&gt;</span> {
        <span class="hljs-built_in">window</span>.clickMe=clickMe.default;
    });
});
</code></pre>
<h4 id="t478.1.3 html">8.1.3 html <a href="#t478.1.3 html"> # </a></h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;clickBtn&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;clickMe()&quot;</span>&gt;</span>&#x5F39;&#x6846;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<h3 id="t488.2 react-router4 &#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;">8.2 react-router4 &#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D; <a href="#t488.2 react-router4 &#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;"> # </a></h3>
<h4 id="t498.2.1 index.js">8.2.1 index.js <a href="#t498.2.1 index.js"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> {HashRouter <span class="hljs-keyword">as</span> Router,Route} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> Bundle <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./Bundle&apos;</span>;
<span class="hljs-keyword">let</span> LazyAbout=<span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> (&lt;Bundle {...props} load={()=&gt;import(&apos;./About&apos;)}/&gt;)
let Home=() =&gt; &lt;div&gt;Home&lt;/div&gt;
ReactDOM.render(
&lt;Router&gt;
    &lt;div&gt;
      &lt;Route path=&quot;/&quot; component={Home} /&gt;
      &lt;Route path=&quot;/about&quot; component={LazyAbout}/&gt;
    &lt;/div&gt;
&lt;/Router&gt;,document.getElementById(&apos;root&apos;));
</code></pre>
<h4 id="t508.2.2 Bundle">8.2.2 Bundle <a href="#t508.2.2 Bundle"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Bundle</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    state={<span class="hljs-attr">Mod</span>: <span class="hljs-literal">null</span>}
    componentWillMount() {
        <span class="hljs-keyword">this</span>.props.load().then(<span class="hljs-function"><span class="hljs-params">mod</span>=&gt;</span><span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">Mod</span>: mod.default? mod.default:mod}));
    }
    render() {
        <span class="hljs-keyword">let</span> Mod=<span class="hljs-keyword">this</span>.state.Mod;
        <span class="hljs-keyword">return</span> Mod&amp;&amp;<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Mod</span>  {<span class="hljs-attr">...this.props</span>}/&gt;</span>;
    }
}
</span></code></pre>
<h4 id="t518.2.3 About">8.2.3 About <a href="#t518.2.3 About"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> props =&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</code></pre>
<h3 id="t528.2.4 &#x6E90;&#x7801;">8.2.4 &#x6E90;&#x7801; <a href="#t528.2.4 &#x6E90;&#x7801;"> # </a></h3>
<h4 id="t538.2.4.1 bundle.js">8.2.4.1 bundle.js <a href="#t538.2.4.1 bundle.js"> # </a></h4>
<pre><code class="lang-js">(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{ <span class="hljs-comment">// webpack&#x7684;&#x542F;&#x52A8;&#x51FD;&#x6570;</span>
  <span class="hljs-comment">// The module cache &#x6A21;&#x5757;&#x7684;&#x7F13;&#x5B58;</span>
  <span class="hljs-keyword">var</span> installedModules = {};

  <span class="hljs-comment">// The require function webpack&#x81EA;&#x5DF1;&#x5B9E;&#x73B0;&#x7684;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x91CC;&#x80FD;&#x591F;&#x6267;&#x884C;&#x7684;require&#x65B9;&#x6CD5;</span>
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__webpack_require__</span>(<span class="hljs-params">moduleId</span>) </span>{

    <span class="hljs-comment">// Check if module is in cache &#x770B;&#x770B;&#x6B64;&#x6A21;&#x5757;&#x662F;&#x5426;&#x5728;&#x7F13;&#x5B58;&#x4E2D;</span>
    <span class="hljs-keyword">if</span> (installedModules[moduleId]) {
      <span class="hljs-comment">//&#x5982;&#x679C;&#x7F13;&#x5B58;&#x6709;&#x7684;&#x8BDD;&#xFF0C;&#x5219;&#x53D6;&#x5B83;&#x7F13;&#x5B58;&#x7684;&#x6A21;&#x5757;&#x7684;&#x5BF9;&#x8C61;&#x7684;exports&#x5C5E;&#x6027;&#x5E76;&#x8FD4;&#x56DE;</span>
      <span class="hljs-keyword">return</span> installedModules[moduleId].exports;

    }
    <span class="hljs-comment">// Create a new module (and put it into the cache)</span>
    <span class="hljs-comment">//&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x5E76;&#x4E14;&#x653E;&#x7F6E;&#x5230;&#x7F13;&#x5B58;</span>
    <span class="hljs-keyword">var</span> <span class="hljs-built_in">module</span> = installedModules[moduleId] = {
      <span class="hljs-attr">i</span>: moduleId,<span class="hljs-comment">//i=identify&#x6A21;&#x5757;&#x7684;&#x6807;&#x8BC6;&#x7B26;&#xFF0C;&#x6A21;&#x5757;&#x7684;ID</span>
      l: <span class="hljs-literal">false</span>,<span class="hljs-comment">//l= loaded &#x662F;&#x5426;&#x5DF2;&#x7ECF;&#x52A0;&#x8F7D;&#x5B8C;&#x6210;</span>
      exports: {} <span class="hljs-comment">//&#x6B64;&#x6A21;&#x5757;&#x5BFC;&#x51FA;&#x5BF9;&#x8C61;</span>
    };

    <span class="hljs-comment">// Execute the module function &#x6267;&#x884C;&#x6A21;&#x5757;&#x51FD;&#x6570;,&#x4F20;&#x5165;&#x53C2;&#x6570; </span>
    <span class="hljs-comment">//1 module.exports=this 2.module &#x6A21;&#x5757;&#x5BF9;&#x8C61;  3.module.exports &#x6A21;&#x5757;&#x7684;&#x5BFC;&#x51FA;&#x5BF9;&#x8C61; 4.require&#x65B9;&#x6CD5;</span>
    modules[moduleId].call(<span class="hljs-built_in">module</span>.exports, <span class="hljs-built_in">module</span>, <span class="hljs-built_in">module</span>.exports, __webpack_require__);

    <span class="hljs-comment">// Flag the module as loaded &#x628A;&#x6A21;&#x5757;&#x6807;&#x8BC6; &#x4E3A;&#x5DF2;&#x52A0;&#x8F7D; loaded=true</span>
    <span class="hljs-built_in">module</span>.l = <span class="hljs-literal">true</span>;

    <span class="hljs-comment">// Return the exports of the module &#x8FD4;&#x56DE;&#x6A21;&#x5757;&#x7684;&#x5BFC;&#x51FA;&#x5BF9;&#x8C61;</span>
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">module</span>.exports;
  }


  <span class="hljs-comment">// expose the modules object (__webpack_modules__) &#x628A;modules&#x6302;&#x8F7D;&#x5230;require&#x7684;m&#x5C5E;&#x6027;</span>
  __webpack_require__.m = modules;

  <span class="hljs-comment">// expose the module cache&#x628A;&#x6A21;&#x5757;&#x7684;&#x7F13;&#x5B58;&#x6302;&#x8F7D;&#x5230;require&#x7684;c&#x5C5E;&#x6027;&#x4E0A; </span>
  __webpack_require__.c = installedModules;

 <span class="hljs-comment">/**
   let obj={};
    let age=&apos;age&apos;;
    function getter() {
        return 9;
    }
    Object.defineProperty(obj,age,{enumerable: true,get: getter});
    console.log(obj.age)
  */</span>
  <span class="hljs-comment">// define getter function for harmony exports</span>
  <span class="hljs-comment">//&#x5B9A;&#x4E49;(define)&#x4E00;&#x4E2A;getter&#x65B9;&#x6CD5; 1&#x5BFC;&#x51FA;&#x5BF9;&#x8C61; 2&#x540D;&#x79F0; 3 getter</span>
  __webpack_require__.d = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">exports, name, getter</span>) </span>{
      <span class="hljs-comment">//&#x5224;&#x65AD;&#x5BF9;&#x8C61;&#x6709;&#x6CA1;&#x6709;&#x67D0;&#x4E2A;&#x5C5E;&#x6027; exports.hasOwnProperty(name)</span>
    <span class="hljs-keyword">if</span> (!__webpack_require__.o(exports, name)) {
      <span class="hljs-comment">//&#x7ED9;exports&#x5BF9;&#x8C61;&#x5B9A;&#x4E49;name&#x5C5E;&#x6027;&#xFF0C;&#x503C;&#x662F;&#x53EF;&#x679A;&#x4E3E;&#x7684;&#xFF0C;get</span>
      <span class="hljs-built_in">Object</span>.defineProperty(exports, name, { <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">get</span>: getter });
      <span class="hljs-comment">//   exports[name]</span>
    }
  };
 <span class="hljs-comment">/**
  * &#x5BF9;&#x8C61;&#x7684;Symbol.toStringTag&#x5C5E;&#x6027;&#xFF0C;&#x6307;&#x5411;&#x4E00;&#x4E2A;&#x65B9;&#x6CD5;
  * &#x5728;&#x8BE5;&#x5BF9;&#x8C61;&#x4E0A;&#x9762;&#x8C03;&#x7528;Object.prototype.toString&#x65B9;&#x6CD5;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x8FD9;&#x4E2A;&#x5C5E;&#x6027;&#x5B58;&#x5728;&#xFF0C;&#x5B83;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x4F1A;&#x51FA;&#x73B0;&#x5728;toString&#x65B9;&#x6CD5;&#x8FD4;&#x56DE;&#x7684;&#x5B57;&#x7B26;&#x4E32;&#x4E4B;&#x4E2D;&#xFF0C;&#x8868;&#x793A;&#x5BF9;&#x8C61;&#x7684;&#x7C7B;&#x578B;
  * &#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#xFF0C;&#x8FD9;&#x4E2A;&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x5B9A;&#x5236;[object Object]&#x6216;[object Array]&#x4E2D;object&#x540E;&#x9762;&#x7684;&#x90A3;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;
  * ({[Symbol.toStringTag]: &apos;Foo&apos;}.toString())  &quot;[object Foo]&quot;
  */</span>
  <span class="hljs-comment">// define __esModule on exports &#x5728;&#x5BFC;&#x51FA;&#x5BF9;&#x8C61;&#x4E0A;&#x5B9A;&#x4E49;__esModule&#x5C5E;&#x6027;</span>
  <span class="hljs-comment">//&#x5982;&#x679C;&#x6B64;exports&#x5BF9;&#x8C61;__esModule&#x5C5E;&#x6027;&#x4E3A;true&#x7684;&#x8BDD;&#xFF0C;&#x8868;&#x793A;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;es6&#x7684;&#x6A21;&#x5757;</span>
  __webpack_require__.r = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">exports</span>) </span>{
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">Symbol</span> !== <span class="hljs-string">&apos;undefined&apos;</span> &amp;&amp; <span class="hljs-built_in">Symbol</span>.toStringTag) {
      <span class="hljs-comment">//&#x5982;&#x679C;&#x662F;&#x652F;&#x6301;es6&#x7684;Symbol&#x5C5E;&#x6027;&#x7684;&#x8BDD;&#xFF0C;&#x90A3;&#x4E48;&#x5B9A;&#x4E49;&#x5C5E;&#x6027; exports[Symbol.toStringTag] =&apos;Module&apos;</span>
      <span class="hljs-comment">// exports.toString = &quot;[object Module]&quot;</span>
      <span class="hljs-built_in">Object</span>.defineProperty(exports, <span class="hljs-built_in">Symbol</span>.toStringTag, { <span class="hljs-attr">value</span>: <span class="hljs-string">&apos;Module&apos;</span> });
    }
    <span class="hljs-comment">// exports[&apos;__esModule&apos;] = true;</span>
    <span class="hljs-built_in">Object</span>.defineProperty(exports, <span class="hljs-string">&apos;__esModule&apos;</span>, { <span class="hljs-attr">value</span>: <span class="hljs-literal">true</span> });
  };

  <span class="hljs-comment">// getDefaultExport function for compatibility with non-harmony modules</span>
  <span class="hljs-comment">// &#x83B7;&#x53D6;&#x9ED8;&#x8BA4;&#x5BFC;&#x51FA;&#x51FD;&#x6570;&#x4E3A;&#x4E86;&#x517C;&#x5BB9;&#x6027; &#x53C2;&#x6570;&#x5C31;&#x662F;module&#x5BF9;&#x8C61;</span>
  __webpack_require__.n = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">module</span>) </span>{<span class="hljs-comment">//hello</span>
    <span class="hljs-comment">//&#x5148;&#x62FF;&#x5230;&#x4E00;&#x4E2A;getter,&#x5982;&#x679C;&#x662F;es&#x6A21;&#x5757;&#xFF0C;&#x8FD4;&#x56DE;&#x6A21;&#x5757;&#x7684;default,&#x5426;&#x5219;&#x8FD4;&#x56DE;&#x81EA;&#x8EAB;</span>
    <span class="hljs-keyword">var</span> getter = <span class="hljs-built_in">module</span> &amp;&amp; <span class="hljs-built_in">module</span>.__esModule ?
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getDefault</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">module</span>[<span class="hljs-string">&apos;default&apos;</span>]; } :
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getModuleExports</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">module</span>; };
    <span class="hljs-comment">//var getter =    function() { return &apos;hello&apos;; };</span>
    <span class="hljs-comment">//&#x7ED9;getter&#x4E0A;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;a&#x5C5E;&#x6027;&#xFF0C;&#x503C;&#x4E3A;getter</span>
    <span class="hljs-comment">//&#x8BE5;&#x6A21;&#x5757;&#x7684;a&#x5C5E;&#x6027; = &#x6A21;&#x5757;&#x672C;&#x8EAB;</span>
    __webpack_require__.d(getter, <span class="hljs-string">&apos;a&apos;</span>, getter);
    <span class="hljs-comment">// get a(){return &apos;a&apos;}   obj[&apos;a&apos;]</span>
    <span class="hljs-comment">// getter[&apos;a&apos;] = getter;</span>
    <span class="hljs-comment">//(function() { return &apos;hello&apos;; })[&apos;a&apos;] =  (function() { return &apos;hello&apos;; })</span>
    <span class="hljs-keyword">return</span> getter;

  };

  <span class="hljs-comment">// Object.prototype.hasOwnProperty.call</span>
  <span class="hljs-comment">//&#x5224;&#x65AD;&#x5BF9;&#x8C61;&#x6709;&#x6CA1;&#x6709;&#x67D0;&#x4E2A;&#x5C5E;&#x6027;</span>
  __webpack_require__.o = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">object, property</span>) </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.prototype.hasOwnProperty.call(object, property);
  };

  <span class="hljs-comment">// __webpack_public_path__ webpack&#x7684;&#x516C;&#x5F00;&#x8DEF;&#x5F84;  webpack publicPath</span>
  __webpack_require__.p = <span class="hljs-string">&quot;&quot;</span>;


  <span class="hljs-comment">// Load entry module and return exports</span>
  <span class="hljs-comment">// &#x52A0;&#x8F7D;&#x5165;&#x53E3;&#x6A21;&#x5757;&#x5E76;&#x4E14;&#x8FD4;&#x56DE;&#x5BFC;&#x51FA;&#x5BF9;&#x8C61; s&#x5C31;&#x662F;&#x5165;&#x53E3;&#x6807;&#x8BC6;&#x7B26;</span>
  <span class="hljs-keyword">return</span> __webpack_require__(__webpack_require__.s = <span class="hljs-string">&quot;./src/main.js&quot;</span>);
})
  <span class="hljs-comment">//modules&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x6709;&#x5C5E;&#x6027;&#x548C;&#x503C;&#xFF0C;&#x5C5E;&#x6027;&#x5C31;&#x662F;&#x6B64;&#x6A21;&#x5757;&#x7684;ID&#xFF0C;&#x5176;&#x5B9E;&#x5C31;&#x662F;&#x76F8;&#x5BF9;&#x4E8E;&#x6839;&#x76EE;&#x5F55;&#x7684;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;</span>
  ({
    <span class="hljs-string">&quot;./src/base.js&quot;</span>:
      (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">module, exports</span>) </span>{
        <span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;module.exports = &apos;hello&apos;;\n\n//# sourceURL=webpack:///./src/base.js?&quot;</span>);
      }),
    <span class="hljs-string">&quot;./src/main.js&quot;</span>:
      (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">module, exports, __webpack_require__</span>) </span>{
        <span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;let name = __webpack_require__(/*! ./base */ \&quot;./src/base.js\&quot;);\r\nconsole.log(name);\r\n\n\n//# sourceURL=webpack:///./src/main.js?&quot;</span>);
      })
  });
</code></pre>
<h4 id="t548.2.4.2 hot bundle.js">8.2.4.2 hot bundle.js <a href="#t548.2.4.2 hot bundle.js"> # </a></h4>
<pre><code class="lang-js">(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">modules</span>) </span>{ <span class="hljs-comment">// webpack&#x7684;&#x5165;&#x53E3;&#x6587;&#x4EF6;</span>
  <span class="hljs-comment">// install a JSONP callback for chunk loading</span>
  <span class="hljs-comment">//&#x5B89;&#x88C5;&#x4E00;&#x4E2A;JSONP&#x7684;&#x56DE;&#x8C03;&#x4E3A;&#x4E86;&#x52A0;&#x8F7D;chunk&#x4EE3;&#x7801;&#x5757;</span>
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">webpackJsonpCallback</span>(<span class="hljs-params">data</span>) </span>{<span class="hljs-comment">//data=[[0],additionalModules]</span>
    <span class="hljs-keyword">var</span> chunkIds = data[<span class="hljs-number">0</span>];<span class="hljs-comment">//&#x7B2C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x662F;chunkId&#x7684;&#x6570;&#x7EC4;</span>
    <span class="hljs-keyword">var</span> moreModules = data[<span class="hljs-number">1</span>];<span class="hljs-comment">//&#x8FD9;&#x4E2A;chunk&#x91CC;&#x5305;&#x542B;&#x7684;&#x989D;&#x5916;&#x66F4;&#x591A;&#x7684;&#x6A21;&#x5757;</span>
    <span class="hljs-comment">// add &quot;moreModules&quot; to the modules object,</span>
    <span class="hljs-comment">//&#x628A;&#x8FD9;&#x6B21;&#x53D6;&#x51FA;&#x6765;&#x7684;&#x66F4;&#x591A;&#x7684;&#x6A21;&#x5757;&#x6DFB;&#x52A0;&#x5230;modules&#x5BF9;&#x8C61;&#x4E2D;</span>
    <span class="hljs-comment">// then flag all &quot;chunkIds&quot; as loaded and fire callback</span>
    <span class="hljs-comment">//&#x7136;&#x540E;&#x628A;&#x6240;&#x6709;&#x7684;chunkIds&#x6807;&#x8BC6;&#x4E3A;&#x5DF2;&#x52A0;&#x8F7D;&#xFF0C;&#x5E76;&#x4E14;&#x6267;&#x884C;&#x56DE;&#x8C03;&#x51FD;&#x6570;</span>
    <span class="hljs-keyword">var</span> moduleId, chunkId, i = <span class="hljs-number">0</span>, resolves = [];
    <span class="hljs-comment">//&#x5FAA;&#x73AF;&#x672C;&#x6B21;&#x53D6;&#x51FA;&#x6765;&#x7684;chunkIds</span>
    <span class="hljs-keyword">for</span> (; i &lt; chunkIds.length; i++) {
      chunkId = chunkIds[i];<span class="hljs-comment">//&#x5148;&#x53D6;&#x51FA;&#x4E00;&#x4E2A;chunkId</span>
      <span class="hljs-keyword">if</span> (installedChunks[chunkId]) {<span class="hljs-comment">//&#x5982;&#x679C;&#x8BF4;&#x6709;&#x503C;&#x7684;&#x8BDD;</span>
        <span class="hljs-comment">//&#x628A;&#x8FD9;&#x4E2A;installedChunks[chunkId]&#x7684;0&#x5143;&#x7D20;&#xFF0C;promise resovle&#x65B9;&#x6CD5;&#x6DFB;&#x52A0;resolves&#x6570;&#x7EC4;&#x4E2D;&#x53BB;</span>
        resolves.push(installedChunks[chunkId][<span class="hljs-number">0</span>]);
      }
      installedChunks[chunkId] = <span class="hljs-number">0</span>;<span class="hljs-comment">//&#x52A0;&#x8F7D;&#x5B8C;&#x6210;</span>
    }
    <span class="hljs-comment">//&#x5FAA;&#x73AF;&#x8FED;&#x4EE3;&#x65B0;&#x6A21;&#x5757;&#x5E76;&#x4E14;</span>
    <span class="hljs-keyword">for</span> (moduleId <span class="hljs-keyword">in</span> moreModules) {
      <span class="hljs-comment">//&#x628A;&#x65B0;&#x7684;&#x6A21;&#x5757;&#x5BF9;&#x8C61;&#x7684;&#x4E0A;&#x7684;&#x5C5E;&#x6027;&#x5168;&#x90E8;&#x5408;&#x5E76;&#x6216;&#x8005;&#x8BF4;&#x62F7;&#x8D1D;&#x5230;&#x8001;&#x7684;modules&#x5BF9;&#x8C61;&#x4E0A;</span>
      <span class="hljs-keyword">if</span> (<span class="hljs-built_in">Object</span>.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        modules[moduleId] = moreModules[moduleId];
      }
    }
    <span class="hljs-comment">//&#x5982;&#x679C;parentJsonpFunction&#x6709;&#x503C;&#x7684;&#x8BDD;&#xFF0C;&#x8C03;&#x7528;&#x5B83;,&#x5176;&#x5B9E;&#x5C31;&#x662F;jsonArray.push&#x65B9;&#x6CD5;</span>
    <span class="hljs-keyword">if</span> (parentJsonpFunction) parentJsonpFunction(data);
    <span class="hljs-comment">//&#x4F9D;&#x6B21;&#x8C03;&#x7528;resolve&#x65B9;&#x6CD5;&#xFF0C;&#x8BA9;&#x6BCF;&#x4E2A;promise&#x90FD;&#x6210;&#x529F;</span>
    <span class="hljs-keyword">while</span> (resolves.length) {
      resolves.shift()();
    }
  };


  <span class="hljs-comment">// &#x6A21;&#x5757;&#x7684;&#x7F13;&#x5B58;</span>
  <span class="hljs-keyword">var</span> installedModules = {};

  <span class="hljs-comment">// object to store loaded and loading chunks</span>
  <span class="hljs-comment">// undefined = chunk not loaded, null = chunk preloaded/prefetched</span>
  <span class="hljs-comment">// Promise = chunk loading, 0 = chunk loaded</span>
  <span class="hljs-comment">//&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x7528;&#x6765;&#x5B58;&#x653E;&#x52A0;&#x8F7D;&#x8FC7;&#x7684;&#x548C;&#x52A0;&#x8F7D;&#x4E2D;&#x7684;&#x4EE3;&#x7801;</span>
  <span class="hljs-comment">//chunk=undefined &#x8868;&#x793A;&#x672A;&#x52A0;&#x8F7D;</span>
  <span class="hljs-comment">// chunk=null &#x8868;&#x793A;&#x9884;&#x52A0;&#x8F7D;&#x6216;&#x8005;&#x9884;&#x83B7;&#x53D6;</span>
  <span class="hljs-comment">//chunk=promise &#x7684;&#x8BDD;&#x8868;&#x793A;&#x52A0;&#x8F7D;&#x4E2D;</span>
  <span class="hljs-comment">//chunk=0 &#x8868;&#x793A;&#x5DF2;&#x52A0;&#x8F7D;&#x6216;&#x8005;&#x8BF4;&#x52A0;&#x8F7D;&#x5B8C;&#x6210;</span>
  <span class="hljs-keyword">var</span> installedChunks = {
    <span class="hljs-string">&quot;main&quot;</span>: <span class="hljs-number">0</span>
  };

  <span class="hljs-comment">// script path function &#x7528;&#x6765;&#x751F;&#x6210;&#x811A;&#x672C;&#x8DEF;&#x5F84;&#x7684;&#x51FD;&#x6570;</span>
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">jsonpScriptSrc</span>(<span class="hljs-params">chunkId</span>) </span>{
    <span class="hljs-comment">//p = output publicPath &#x8BBF;&#x95EE;&#x8DEF;&#x5F84;  ,&#x9ED8;&#x8BA4;&#x5C31;&#x662F;/</span>
    <span class="hljs-keyword">return</span> __webpack_require__.p + <span class="hljs-string">&quot;&quot;</span> + chunkId + <span class="hljs-string">&quot;.bundle.js&quot;</span>
  }

  <span class="hljs-comment">//require&#x65B9;&#x6CD5;</span>
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__webpack_require__</span>(<span class="hljs-params">moduleId</span>) </span>{

    <span class="hljs-comment">// Check if module is in cache &#x68C0;&#x67E5;&#x6A21;&#x5757;&#x662F;&#x5426;&#x5728;&#x7F13;&#x5B58;</span>
    <span class="hljs-keyword">if</span> (installedModules[moduleId]) {
      <span class="hljs-keyword">return</span> installedModules[moduleId].exports;
    }
    <span class="hljs-comment">// Create a new module (and put it into the cache) &#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x6A21;&#x5757;&#x5E76;&#x4E14;&#x653E;&#x5230;&#x7F13;&#x5B58;&#x4E2D;</span>
    <span class="hljs-keyword">var</span> <span class="hljs-built_in">module</span> = installedModules[moduleId] = {
      <span class="hljs-attr">i</span>: moduleId,
      <span class="hljs-attr">l</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">exports</span>: {}
    };

    <span class="hljs-comment">// Execute the module function &#x6267;&#x884C;&#x6A21;&#x5757;&#x51FD;&#x6570;&#xFF0C;&#x7ED9;module.exports&#x8D4B;&#x503C;</span>
    modules[moduleId].call(<span class="hljs-built_in">module</span>.exports, <span class="hljs-built_in">module</span>, <span class="hljs-built_in">module</span>.exports, __webpack_require__);

    <span class="hljs-comment">// Flag the module as loaded &#x628A;&#x6A21;&#x5757;&#x8BBE;&#x7F6E;&#x4E3A;&#x5DF2;&#x52A0;&#x8F7D; </span>
    <span class="hljs-built_in">module</span>.l = <span class="hljs-literal">true</span>;

    <span class="hljs-comment">// Return the exports of the module &#x8FD4;&#x56DE;&#x6A21;&#x5757;&#x7684;&#x5BFC;&#x51FA;&#x5BF9;&#x8C61;</span>
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">module</span>.exports;
  }

  <span class="hljs-comment">// This file contains only the entry chunk.</span>
  <span class="hljs-comment">// The chunk loading function for additional chunks</span>
  <span class="hljs-comment">//&#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#x53EA;&#x5305;&#x542B;&#x5165;&#x53E3;chunk</span>
  <span class="hljs-comment">//&#x8FD9;&#x4E2A;&#x4EE3;&#x7801;&#x5757;&#x52A0;&#x8F7D;&#x51FD;&#x6570;&#x662F;&#x4E3A;&#x4E86;&#x52A0;&#x8F7D;&#x989D;&#x5916;&#x7684;&#x6A21;&#x5757;</span>
  __webpack_require__.e = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">requireEnsure</span>(<span class="hljs-params">chunkId</span>) </span>{
    <span class="hljs-keyword">var</span> promises = [];<span class="hljs-comment">//&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x7A7A;&#x7684;promise&#x6570;&#x7EC4;</span>

    <span class="hljs-comment">// JSONP chunk loading for javascript</span>
    <span class="hljs-comment">// &#x5148;&#x53D6;&#x51FA;&#x6B64;chunkID&#x5BF9;&#x5E94;&#x7684;&#x503C; ,&#x7B2C;&#x4E00;&#x6B21;&#x7684;&#x80AF;&#x5B9A;&#x662F;&#x6CA1;&#x6709;&#x503C;</span>
    <span class="hljs-keyword">var</span> installedChunkData = installedChunks[chunkId];
    <span class="hljs-comment">//&#x4E0D;&#x7B49;0&#x7684;&#x8BDD;&#x8868;&#x793A;&#x672A;&#x5B89;&#x88C5;&#xFF0C;0&#x8868;&#x793A;&#x5DF2; &#x5B89;&#x88C5;&#x6216;&#x8005;&#x8BF4;&#x5DF2;&#x52A0;&#x8F7D;</span>
    <span class="hljs-keyword">if</span> (installedChunkData !== <span class="hljs-number">0</span>) { <span class="hljs-comment">// 0 means &quot;already installed&quot;.</span>

      <span class="hljs-comment">// a Promise means &quot;currently loading&quot;. &#x5982;&#x679C;&#x662F;&#x4E00;&#x4E2A;promise&#x8868;&#x793A;&#x6B63;&#x5728;&#x52A0;&#x8F7D;</span>
      <span class="hljs-keyword">if</span> (installedChunkData) {<span class="hljs-comment">//&#x5982;&#x679C;&#x6709;&#x503C;&#xFF0C;&#x628A;&#x7D22;&#x5F15;2&#x5BF9;&#x5E94;&#x7684;&#x5C5E;&#x6027;&#x6DFB;&#x52A0;&#x5230;promises&#x6570;&#x7EC4;&#x4E2D;</span>
        promises.push(installedChunkData[<span class="hljs-number">2</span>]);
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-comment">// setup Promise in chunk cache &#x5728;chunk&#x7F13;&#x5B58;&#x4E2D;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;promise</span>
        <span class="hljs-keyword">var</span> promise = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>{
          installedChunkData = installedChunks[chunkId] = [resolve, reject];
        });
        <span class="hljs-comment">//&#x628A;&#x8FD9;&#x4E2A;promise&#x6DFB;&#x52A0;&#x5230;promise&#x6570;&#x7EC4;&#x4E2D;&#x53BB;</span>
        promises.push(installedChunkData[<span class="hljs-number">2</span>] = promise);

        <span class="hljs-comment">// start chunk loading &#x5F00;&#x59CB;&#x4EE3;&#x7801;&#x5757;&#x7684;&#x52A0;&#x8F7D;</span>
        <span class="hljs-keyword">var</span> head = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&apos;head&apos;</span>)[<span class="hljs-number">0</span>];
        <span class="hljs-keyword">var</span> script = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;script&apos;</span>);<span class="hljs-comment">//&#x521B;&#x5EFA;&#x4E00;&#x4E2A;script&#x811A;&#x672C;</span>
        <span class="hljs-keyword">var</span> onScriptComplete;<span class="hljs-comment">//&#x5F53;&#x811A;&#x672C;&#x5B8C;&#x6210;&#x540E;</span>

        script.charset = <span class="hljs-string">&apos;utf-8&apos;</span>;<span class="hljs-comment">//&#x8BBE;&#x7F6E;&#x811A;&#x672C;&#x7684;&#x7F16;&#x7801;</span>
        script.timeout = <span class="hljs-number">120</span>;<span class="hljs-comment">//&#x8BBE;&#x7F6E;&#x811A;&#x672C;&#x7684;&#x8D85;&#x65F6;&#x65F6;&#x95F4;</span>
        <span class="hljs-comment">// if (__webpack_require__.nc) {//&#x7528;&#x6765;&#x5B89;&#x5168;&#x5904;&#x7406;&#x7684; nonce</span>
        <span class="hljs-comment">//   script.setAttribute(&quot;nonce&quot;, __webpack_require__.nc);</span>
        <span class="hljs-comment">// }</span>
        <span class="hljs-comment">//&#x62FC;&#x51FA;&#x4E00;&#x4E2A;URL&#x8DEF;&#x5F84;&#x5EA6;&#x4E14;&#x8D4B;&#x7ED9;script.src</span>
        script.src = jsonpScriptSrc(chunkId);
        <span class="hljs-comment">//&#x5B9A;&#x4E49;&#x52A0;&#x8F7D;&#x540E;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;</span>
        onScriptComplete = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
          <span class="hljs-comment">// avoid mem leaks in IE. &#x9632;&#x6B62;IE&#x4E0B;&#x9762;&#x7684;&#x5185;&#x5B58;&#x6CC4;&#x9732;</span>
          script.onerror = script.onload = <span class="hljs-literal">null</span>;
          <span class="hljs-comment">//&#x6E05;&#x9664;&#x5B9A;&#x65F6;&#x5668;.&#x5982;&#x679C;&#x662F;&#x63D0;&#x524D;&#x6267;&#x884C;&#x6B64;&#x51FD;&#x6570;&#xFF0C;&#x5219;&#x9700;&#x8981;&#x5148;&#x6E05;&#x9664;&#x5B9A;&#x65F6;&#x5668;</span>
          clearTimeout(timeout);
          <span class="hljs-comment">//&#x53D6;&#x5F97;&#x5DF2;&#x5B89;&#x88C5;&#x7684;&#x4EE3;&#x7801;&#x5757;&#x4E2D;&#x7684;chunk</span>
          <span class="hljs-keyword">var</span> chunk = installedChunks[chunkId];
          <span class="hljs-keyword">if</span> (chunk !== <span class="hljs-number">0</span>) {<span class="hljs-comment">//&#x5982;&#x679C;&#x4E0D;&#x7B49;0&#x8868;&#x793A;&#x52A0;&#x8F7D;&#x5931;&#x8D25;</span>
            <span class="hljs-keyword">if</span> (chunk) {
              <span class="hljs-keyword">var</span> errorType = event &amp;&amp; (event.type === <span class="hljs-string">&apos;load&apos;</span> ? <span class="hljs-string">&apos;missing&apos;</span> : event.type);
              <span class="hljs-keyword">var</span> realSrc = event &amp;&amp; event.target &amp;&amp; event.target.src;
              <span class="hljs-keyword">var</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">&apos;Loading chunk &apos;</span> + chunkId + <span class="hljs-string">&apos; failed.\n(&apos;</span> + errorType + <span class="hljs-string">&apos;: &apos;</span> + realSrc + <span class="hljs-string">&apos;)&apos;</span>);
              error.type = errorType;
              error.request = realSrc;
              chunk[<span class="hljs-number">1</span>](error);<span class="hljs-comment">//&#x76F4;&#x63A5;&#x8C03;&#x7528;chunk[1],&#x628A;error&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x8FDB;&#x53BB;&#xFF0C;&#x8C03;&#x7528;promise&#x7684;reject&#x65B9;&#x6CD5;&#xFF0C;&#x8BA9;promise&#x5931;&#x8D25;</span>
            }
            <span class="hljs-comment">//&#x628A;&#x5BF9;&#x5E94;&#x7684;&#x503C;&#x7F6E;&#x4E3A;undefine</span>
            installedChunks[chunkId] = <span class="hljs-literal">undefined</span>;
          }
        };
        <span class="hljs-comment">//&#x5F00;&#x542F;&#x4E86;&#x4E00;&#x4E2A;&#x5B9A;&#x65F6;&#x5668;&#xFF0C;&#x5982;&#x679C;&#x8BF4;&#x5230;&#x4E86;120&#x79D2;&#x4E4B;&#x540E;&#x8BF7;&#x6C42;&#x8FD8;&#x6CA1;&#x6709;&#x56DE;&#x6765;&#xFF0C;&#x6211;&#x4EEC;&#x5C31;&#x8BA4;&#x4E3A;&#x8D85;&#x65F6;&#x4E86;&#xFF0C;&#x76F4;&#x63A5;&#x6267;&#x884C;&#x56DE;&#x8C03;</span>
        <span class="hljs-keyword">var</span> timeout = setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
          onScriptComplete({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;timeout&apos;</span>, <span class="hljs-attr">target</span>: script });
        }, <span class="hljs-number">120000</span>);
        script.onerror = script.onload = onScriptComplete;
        <span class="hljs-comment">///&#x628A;JSONP&#x811A;&#x672C;&#x6DFB;&#x52A0;&#x5230;head&#x6807;&#x7B7E;</span>
        head.appendChild(script);
      }
    }
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.all(promises);
  };

  <span class="hljs-comment">// expose the modules object (__webpack_modules__)</span>
  __webpack_require__.m = modules;

  <span class="hljs-comment">// expose the module cache</span>
  __webpack_require__.c = installedModules;

  <span class="hljs-comment">// define getter function for harmony exports</span>
  __webpack_require__.d = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">exports, name, getter</span>) </span>{
    <span class="hljs-keyword">if</span> (!__webpack_require__.o(exports, name)) {
      <span class="hljs-built_in">Object</span>.defineProperty(exports, name, { <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">get</span>: getter });
    }
  };

  <span class="hljs-comment">// define __esModule on exports</span>
  __webpack_require__.r = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">exports</span>) </span>{
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">Symbol</span> !== <span class="hljs-string">&apos;undefined&apos;</span> &amp;&amp; <span class="hljs-built_in">Symbol</span>.toStringTag) {
      <span class="hljs-built_in">Object</span>.defineProperty(exports, <span class="hljs-built_in">Symbol</span>.toStringTag, { <span class="hljs-attr">value</span>: <span class="hljs-string">&apos;Module&apos;</span> });
    }
    <span class="hljs-built_in">Object</span>.defineProperty(exports, <span class="hljs-string">&apos;__esModule&apos;</span>, { <span class="hljs-attr">value</span>: <span class="hljs-literal">true</span> });
  };

  <span class="hljs-comment">// create a fake namespace object &#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x6A21;&#x62DF;&#x7684;&#x547D;&#x540D;&#x7A7A;&#x95F4;</span>
  <span class="hljs-comment">// mode &amp; 1: value is a module id, require it &#x6A21;&#x5757;&#x662F;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x6807;&#x8BC6;&#x7B26;</span>
  <span class="hljs-comment">// mode &amp; 2: merge all properties of value into the ns &#x628A;&#x6240;&#x6709;&#x7684;&#x5C5E;&#x6027;&#x5408;&#x5E76;&#x5230;ns&#x4E0A;</span>
  <span class="hljs-comment">// mode &amp; 4: return value when already ns object &#x5F53;ns&#x5BF9;&#x8C61;OK&#x540E;&#x8FD4;&#x56DE;value</span>
  <span class="hljs-comment">// mode &amp; 8|1: behave like require &#x548C;require&#x8868;&#x73B0;&#x4E00;&#x6837;</span>
  __webpack_require__.t = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value, mode</span>) </span>{
    <span class="hljs-comment">//&#x5982;&#x679C;&#x8BF4;mode&#x662F;1&#x7684;&#x8BDD;&#xFF0C;&#x5219;&#x7528;require&#x53BB;&#x52A0;&#x8F7D;&#x8FD9;&#x4E2A;&#x6A21;&#x5757;</span>
    <span class="hljs-keyword">if</span> (mode &amp; <span class="hljs-number">1</span>) value = __webpack_require__(value);
    <span class="hljs-comment">//&#x5982;&#x679C;mode&#x662F;8&#x7684;&#x8BDD;&#xFF0C;&#x5219;&#x76F4;&#x63A5;&#x8FD4;&#x56DE;</span>
    <span class="hljs-keyword">if</span> (mode &amp; <span class="hljs-number">8</span>) <span class="hljs-keyword">return</span> value;
    <span class="hljs-comment">//&#x5982;&#x679C;&#x662F;mode&#x662F;4&#x7684;&#x8BDD; &#x76F4;&#x63A5;&#x8FD4;&#x56DE;value</span>
    <span class="hljs-keyword">if</span> ((mode &amp; <span class="hljs-number">4</span>) &amp;&amp; <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">&apos;object&apos;</span> &amp;&amp; value &amp;&amp; value.__esModule) <span class="hljs-keyword">return</span> value;
    <span class="hljs-comment">//&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x7A7A;&#x7684;&#x5BF9;&#x8C61;</span>
    <span class="hljs-keyword">var</span> ns = <span class="hljs-built_in">Object</span>.create(<span class="hljs-literal">null</span>);
    <span class="hljs-comment">//r&#x5C31;&#x662F;&#x5728;&#x5BF9;&#x8C61;&#x4E0A;&#x5B9A;&#x4E49;__esModule= true</span>
    __webpack_require__.r(ns);<span class="hljs-comment">//ns&#x662F;&#x4E00;&#x4E2A;es&#x6A21;&#x5757;  es.__esModule= true</span>
    <span class="hljs-comment">//ns&#x7684;default&#x5C5E;&#x6027;&#x4E3A;value</span>
    <span class="hljs-built_in">Object</span>.defineProperty(ns, <span class="hljs-string">&apos;default&apos;</span>, { <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">value</span>: value });
    <span class="hljs-comment">// ns[&apos;default&apos;] = value;</span>
    <span class="hljs-comment">//&#x5982;&#x679C;mode&#x503C;&#x662F;2&#x7684;&#x8BDD;&#xFF0C;&#x628A;value&#x4E0A;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x5168;&#x90E8;&#x62F7;&#x8D1D;&#x5230;ns&#x4E0A;</span>
    <span class="hljs-keyword">if</span> (mode &amp; <span class="hljs-number">2</span> &amp;&amp; <span class="hljs-keyword">typeof</span> value != <span class="hljs-string">&apos;string&apos;</span>) 
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> key <span class="hljs-keyword">in</span> value) 
           __webpack_require__.d(ns, key, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">key</span>) </span>{ 
               <span class="hljs-keyword">return</span> value[key]; 
           }.bind(<span class="hljs-literal">null</span>, key));
    <span class="hljs-keyword">return</span> ns;<span class="hljs-comment">//ns = {__esModule:true,default:&apos;video&apos;}</span>
  };

  <span class="hljs-comment">// getDefaultExport function for compatibility with non-harmony modules</span>
  __webpack_require__.n = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">module</span>) </span>{
    <span class="hljs-keyword">var</span> getter = <span class="hljs-built_in">module</span> &amp;&amp; <span class="hljs-built_in">module</span>.__esModule ?
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getDefault</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">module</span>[<span class="hljs-string">&apos;default&apos;</span>]; } :
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getModuleExports</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">module</span>; };
      <span class="hljs-comment">//&#x8BE5;&#x6A21;&#x5757;&#x7684;a&#x5C5E;&#x6027; = &#x6A21;&#x5757;&#x672C;&#x8EAB;</span>
    __webpack_require__.d(getter, <span class="hljs-string">&apos;a&apos;</span>, getter);
    <span class="hljs-keyword">return</span> getter;
  };

  <span class="hljs-comment">// Object.prototype.hasOwnProperty.call</span>
  __webpack_require__.o = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">object, property</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.prototype.hasOwnProperty.call(object, property); };

  <span class="hljs-comment">// __webpack_public_path__</span>
  __webpack_require__.p = <span class="hljs-string">&quot;&quot;</span>;

  <span class="hljs-comment">// on error function for async loading</span>
  __webpack_require__.oe = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">err</span>) </span>{ <span class="hljs-built_in">console</span>.error(err); <span class="hljs-keyword">throw</span> err; };
  <span class="hljs-comment">//&#x521A;&#x5F00;&#x59CB;&#x7684;&#x65F6;&#x5019;webpackJsonp&#x662F;undefined,&#x90A3;&#x4E48;&#x5C31;&#x7ED9;&#x4ED6;&#x4E00;&#x4E2A;&#x7A7A;&#x6570;&#x7EC4;</span>
  <span class="hljs-keyword">var</span> jsonpArray = <span class="hljs-built_in">window</span>[<span class="hljs-string">&quot;webpackJsonp&quot;</span>] = <span class="hljs-built_in">window</span>[<span class="hljs-string">&quot;webpackJsonp&quot;</span>] || [];
  <span class="hljs-comment">//&#x7ED9;&#x6570;&#x7EC4;&#x7684;push&#x65B9;&#x6CD5;&#x7ED1;&#x5B9A;&#x6570;&#x7EC4;&#x672C;&#x8EAB;,&#x5982;&#x679C;&#x4EE5;&#x540E;&#x6709;&#x4EBA;&#x518D;&#x8C03;&#x7528;oldJsonpFunction,&#x5C31;&#x76F8;&#x5F53;&#x4E8E;&#x8C03;&#x7528;jsonpArray.push</span>
  <span class="hljs-keyword">var</span> oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  <span class="hljs-comment">//&#x8BA9;&#x6570;&#x7EC4;&#x7684;push&#x65B9;&#x6CD5;&#x6307;&#x5411;&#x53E6;&#x5916;&#x4E00;&#x4E2A;&#x51FD;&#x6570;webpackJsonpCallback</span>
  jsonpArray.push = webpackJsonpCallback;
  <span class="hljs-comment">//&#x62F7;&#x8D1D;&#x51FA;&#x6765;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x6570;&#x7EC4; </span>
  jsonpArray = jsonpArray.slice();
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
  <span class="hljs-keyword">var</span> parentJsonpFunction = oldJsonpFunction;
  <span class="hljs-comment">// Load entry module and return exports</span>
  <span class="hljs-keyword">return</span> __webpack_require__(__webpack_require__.s = <span class="hljs-string">&quot;./src/main.js&quot;</span>);
})
  ({

    <span class="hljs-string">&quot;./src/main.js&quot;</span>:
      (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">module, exports, __webpack_require__</span>) </span>{
        <span class="hljs-comment">//e ensure</span>
        <span class="hljs-built_in">eval</span>(<span class="hljs-string">`
        document.querySelector(&apos;#play&apos;)
        .addEventListener(&apos;mouseover&apos;, () =&gt; {
           __webpack_require__.e(0)
           //ns = {__esModule:true,default:&apos;video&apos;}
           .then(__webpack_require__.t.bind(null, \&quot;./src/video.js\&quot;, 7))
           .then(video =&gt; {
             console.log(video.default);
             })
          });`</span>);
      })

  });
</code></pre>
<h4 id="t558.2.4.3 0.bundle">8.2.4.3 0.bundle <a href="#t558.2.4.3 0.bundle"> # </a></h4>
<pre><code class="lang-js">(<span class="hljs-built_in">window</span>[<span class="hljs-string">&quot;webpackJsonp&quot;</span>] = <span class="hljs-built_in">window</span>[<span class="hljs-string">&quot;webpackJsonp&quot;</span>] || []).push([[<span class="hljs-number">0</span>], {

  <span class="hljs-string">&quot;./src/video.js&quot;</span>:
    (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">module, exports</span>) </span>{
      <span class="hljs-built_in">eval</span>(<span class="hljs-string">&quot;module.exports = &apos;video&apos;;\n\n//# sourceURL=webpack:///./src/video.js?&quot;</span>);
    })
}]);
</code></pre>
<h2 id="t569. &#x7528; HMR &#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;">9. &#x7528; HMR &#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387; <a href="#t569. &#x7528; HMR &#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;"> # </a></h2>
<ul>
<li>HMR &#x5168;&#x79F0;&#x662F; Hot Module Replacement&#xFF0C;&#x5373;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;</li>
<li>Hot Reloading&#xFF0C;&#x5F53;&#x4EE3;&#x7801;&#x53D8;&#x66F4;&#x65F6;&#x901A;&#x77E5;&#x6D4F;&#x89C8;&#x5668;&#x5237;&#x65B0;&#x9875;&#x9762;&#xFF0C;&#x4EE5;&#x907F;&#x514D;&#x9891;&#x7E41;&#x624B;&#x52A8;&#x5237;&#x65B0;&#x6D4F;&#x89C8;&#x5668;&#x9875;&#x9762;</li>
<li>HMR &#x53EF;&#x4EE5;&#x7406;&#x89E3;&#x4E3A;&#x589E;&#x5F3A;&#x7248;&#x7684; Hot Reloading&#xFF0C;&#x4F46;&#x4E0D;&#x7528;&#x6574;&#x4E2A;&#x9875;&#x9762;&#x5237;&#x65B0;&#xFF0C;&#x800C;&#x662F;&#x5C40;&#x90E8;&#x66FF;&#x6362;&#x6389;&#x90E8;&#x5206;&#x6A21;&#x5757;&#x4EE3;&#x7801;&#x5E76;&#x4E14;&#x4F7F;&#x5176;&#x751F;&#x6548;</li>
<li>&#x539F;&#x7406;&#x662F;&#x5F53;&#x4E00;&#x4E2A;&#x6E90;&#x7801;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x65F6;&#xFF0C;&#x53EA;&#x91CD;&#x65B0;&#x7F16;&#x8BD1;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x518D;&#x7528;&#x65B0;&#x8F93;&#x51FA;&#x7684;&#x6A21;&#x5757;&#x66FF;&#x6362;&#x6389;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x5BF9;&#x5E94;&#x7684;&#x8001;&#x6A21;&#x5757;</li>
<li>&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x6280;&#x672F;&#x7684;&#x4F18;&#x52BF;&#x6709;&#xFF1A;<ul>
<li>&#x5B9E;&#x65F6;&#x9884;&#x89C8;&#x53CD;&#x5E94;&#x66F4;&#x5FEB;&#xFF0C;&#x7B49;&#x5F85;&#x65F6;&#x95F4;&#x66F4;&#x77ED;&#x3002;</li>
<li>&#x4E0D;&#x5237;&#x65B0;&#x6D4F;&#x89C8;&#x5668;&#x80FD;&#x4FDD;&#x7559;&#x5F53;&#x524D;&#x7F51;&#x9875;&#x7684;&#x8FD0;&#x884C;&#x72B6;&#x6001;&#xFF0C;&#x4F8B;&#x5982;&#x5728;&#x4F7F;&#x7528; Redux &#x6765;&#x7BA1;&#x7406;&#x6570;&#x636E;&#x7684;&#x5E94;&#x7528;&#x4E2D;&#x642D;&#x914D;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x80FD;&#x505A;&#x5230;&#x4EE3;&#x7801;&#x66F4;&#x65B0;&#x65F6;Redux &#x4E2D;&#x7684;&#x6570;&#x636E;&#x8FD8;&#x4FDD;&#x6301;&#x4E0D;&#x53D8;</li>
</ul>
</li>
</ul>
<h3 id="t579.1 &#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x539F;&#x7406;">9.1 &#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x539F;&#x7406; <a href="#t579.1 &#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x539F;&#x7406;"> # </a></h3>
<ul>
<li>&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x7684;&#x539F;&#x7406;&#x548C;&#x81EA;&#x52A8;&#x5237;&#x65B0;&#x539F;&#x7406;&#x7C7B;&#x4F3C;&#xFF0C;&#x90FD;&#x9700;&#x8981;&#x5F80;&#x8981;&#x5F00;&#x53D1;&#x7684;&#x7F51;&#x9875;&#x4E2D;&#x6CE8;&#x5165;&#x4E00;&#x4E2A;&#x4EE3;&#x7406;&#x5BA2;&#x6237;&#x7AEF;&#x7528;&#x4E8E;&#x8FDE;&#x63A5; DevServer &#x548C;&#x7F51;&#x9875;</li>
</ul>
<p><img src="http://img.zhufengpeixun.cn/hotupdate.png" alt="hotupdate"></p>
<h3 id="t589.2 &#x914D;&#x7F6E;">9.2 &#x914D;&#x7F6E; <a href="#t589.2 &#x914D;&#x7F6E;"> # </a></h3>
<h4 id="t599.2.1 &#x914D;&#x7F6E;hot">9.2.1 &#x914D;&#x7F6E;hot <a href="#t599.2.1 &#x914D;&#x7F6E;hot"> # </a></h4>
<ul>
<li>DevServer &#x9ED8;&#x8BA4;&#x4E0D;&#x4F1A;&#x5F00;&#x542F;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x6A21;&#x5F0F;&#xFF0C;&#x8981;&#x5F00;&#x542F;&#x8BE5;&#x6A21;&#x5F0F;&#xFF0C;&#x53EA;&#x9700;&#x5728;&#x542F;&#x52A8;&#x65F6;&#x5E26;&#x4E0A;&#x53C2;&#x6570; <code>--hot</code><pre><code class="lang-js"><span class="hljs-keyword">const</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack&apos;</span>);
<span class="hljs-built_in">module</span>.exports = {
<span class="hljs-attr">entry</span>:{
  <span class="hljs-attr">main</span>:<span class="hljs-string">&apos;./src/index.js&apos;</span>,
},
<span class="hljs-attr">plugins</span>: [
  <span class="hljs-comment">// &#x8BE5;&#x63D2;&#x4EF6;&#x7684;&#x4F5C;&#x7528;&#x5C31;&#x662F;&#x5B9E;&#x73B0;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#xFF0C;&#x5B9E;&#x9645;&#x4E0A;&#x5F53;&#x542F;&#x52A8;&#x65F6;&#x5E26;&#x4E0A; `--hot` &#x53C2;&#x6570;&#xFF0C;&#x4F1A;&#x6CE8;&#x5165;&#x8BE5;&#x63D2;&#x4EF6;&#xFF0C;&#x751F;&#x6210; .hot-update.json &#x6587;&#x4EF6;&#x3002;</span>
  <span class="hljs-keyword">new</span> webpack.NamedModulesPlugin(), <span class="hljs-comment">// &#x7528;&#x4E8E;&#x542F;&#x52A8; HMR &#x65F6;&#x53EF;&#x4EE5;&#x663E;&#x793A;&#x6A21;&#x5757;&#x7684;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;</span>
  <span class="hljs-keyword">new</span> webpack.HotModuleReplacementPlugin(), <span class="hljs-comment">// Hot Module Replacement &#x7684;&#x63D2;&#x4EF6;</span>
],
<span class="hljs-attr">devServer</span>:{
  <span class="hljs-comment">// &#x544A;&#x8BC9; DevServer &#x8981;&#x5F00;&#x542F;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x6A21;&#x5F0F;</span>
  hot: <span class="hljs-literal">true</span>,      
}  
};
</code></pre>
<blockquote>
<p>&#x5728;&#x542F;&#x52A8; Webpack &#x65F6;&#x5E26;&#x4E0A;&#x53C2;&#x6570; --hot &#x5176;&#x5B9E;&#x5C31;&#x662F;&#x81EA;&#x52A8;&#x4E3A;&#x4F60;&#x5B8C;&#x6210;&#x4EE5;&#x4E0A;&#x914D;&#x7F6E;&#x3002;</p>
</blockquote>
</li>
</ul>
<h4 id="t609.2.2 &#x4EE3;&#x7801;&#x5B9E;&#x73B0;">9.2.2 &#x4EE3;&#x7801;&#x5B9E;&#x73B0; <a href="#t609.2.2 &#x4EE3;&#x7801;&#x5B9E;&#x73B0;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { render } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./App&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.css&apos;</span>;
render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">App</span>/&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;root&apos;</span>));

<span class="hljs-comment">// &#x53EA;&#x6709;&#x5F53;&#x5F00;&#x542F;&#x4E86;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x65F6; module.hot &#x624D;&#x5B58;&#x5728;</span>
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">module</span>.hot) {
  <span class="hljs-comment">// accept &#x51FD;&#x6570;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x6307;&#x51FA;&#x5F53;&#x524D;&#x6587;&#x4EF6;&#x63A5;&#x53D7;&#x54EA;&#x4E9B;&#x5B50;&#x6A21;&#x5757;&#x7684;&#x66FF;&#x6362;&#xFF0C;&#x8FD9;&#x91CC;&#x8868;&#x793A;&#x53EA;&#x63A5;&#x53D7; ./AppComponent &#x8FD9;&#x4E2A;&#x5B50;&#x6A21;&#x5757;</span>
  <span class="hljs-comment">// &#x7B2C;2&#x4E2A;&#x53C2;&#x6570;&#x7528;&#x4E8E;&#x5728;&#x65B0;&#x7684;&#x5B50;&#x6A21;&#x5757;&#x52A0;&#x8F7D;&#x5B8C;&#x6BD5;&#x540E;&#x9700;&#x8981;&#x6267;&#x884C;&#x7684;&#x903B;&#x8F91;</span>
  <span class="hljs-built_in">module</span>.hot.accept([<span class="hljs-string">&apos;./App&apos;</span>], () =&gt; {
    <span class="hljs-comment">// &#x65B0;&#x7684; AppComponent &#x52A0;&#x8F7D;&#x6210;&#x529F;&#x540E;&#x91CD;&#x65B0;&#x6267;&#x884C;&#x4E0B;&#x7EC4;&#x5EFA;&#x6E32;&#x67D3;&#x903B;&#x8F91;</span>
    <span class="hljs-keyword">let</span> App=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./App&apos;</span>).default;  
    render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">App</span>/&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;root&apos;</span>));
  });
}
</code></pre>
<ul>
<li>module.hot &#x662F;&#x5F53;&#x5F00;&#x542F;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x540E;&#x6CE8;&#x5165;&#x5230;&#x5168;&#x5C40;&#x7684; API&#xFF0C;&#x7528;&#x4E8E;&#x63A7;&#x5236;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x7684;&#x903B;&#x8F91;</li>
<li>&#x5F53;&#x5B50;&#x6A21;&#x5757;&#x53D1;&#x751F;&#x66F4;&#x65B0;&#x65F6;&#xFF0C;&#x66F4;&#x65B0;&#x4E8B;&#x4EF6;&#x4F1A;&#x4E00;&#x5C42;&#x5C42;&#x5F80;&#x4E0A;&#x4F20;&#x9012;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x4ECE;<code>App.js</code>&#x6587;&#x4EF6;&#x4F20;&#x9012;&#x5230;<code>index.js</code>&#x6587;&#x4EF6;&#xFF0C; &#x76F4;&#x5230;&#x6709;&#x67D0;&#x5C42;&#x7684;&#x6587;&#x4EF6;&#x63A5;&#x53D7;&#x4E86;&#x5F53;&#x524D;&#x53D8;&#x5316;&#x7684;&#x6A21;&#x5757;</li>
<li>&#x5982;&#x679C;&#x4E8B;&#x4EF6;&#x4E00;&#x76F4;&#x5F80;&#x4E0A;&#x629B;&#x5230;&#x6700;&#x5916;&#x5C42;&#x90FD;&#x6CA1;&#x6709;&#x6587;&#x4EF6;&#x63A5;&#x53D7;&#x5B83;&#xFF0C;&#x5C31;&#x4F1A;&#x76F4;&#x63A5;&#x5237;&#x65B0;&#x7F51;&#x9875;</li>
<li><code>.css</code>&#x6587;&#x4EF6;&#x90FD;&#x4F1A;&#x89E6;&#x53D1;&#x6A21;&#x5757;&#x70ED;&#x66FF;&#x6362;&#x7684;&#x539F;&#x56E0;&#x662F;<code>style-loader</code>&#x4F1A;&#x6CE8;&#x5165;&#x7528;&#x4E8E;&#x63A5;&#x53D7; CSS &#x7684;&#x4EE3;&#x7801;</li>
</ul>
<h3 id="t619.3 &#x539F;&#x7406;">9.3 &#x539F;&#x7406; <a href="#t619.3 &#x539F;&#x7406;"> # </a></h3>
<h4 id="t629.3.1. server&#x7AEF;">9.3.1. server&#x7AEF; <a href="#t629.3.1. server&#x7AEF;"> # </a></h4>
<p>webpack &#x5728;server&#x7AEF;&#x8FDB;&#x884C;&#x70ED;&#x66F4;&#x65B0;&#x7684;&#x6D41;&#x7A0B;</p>
<h5 id="t639.3.1.1 webpack &#x5B9E;&#x4F8B;">9.3.1.1 webpack &#x5B9E;&#x4F8B; <a href="#t639.3.1.1 webpack &#x5B9E;&#x4F8B;"> # </a></h5>
<p>&#x521B;&#x5EFA;&#x4E00;&#x4E2A; webpack &#x5B9E;&#x4F8B;
webpack-dev-server/bin/webpack-dev-server.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> compiler = webpack(webpackOptions);
<span class="hljs-keyword">let</span> server = <span class="hljs-keyword">new</span> Server(compiler, options);
</code></pre>
<h5 id="t649.3.1.2 express&#x5B9E;&#x4F8B;">9.3.1.2 express&#x5B9E;&#x4F8B; <a href="#t649.3.1.2 express&#x5B9E;&#x4F8B;"> # </a></h5>
<p>&#x521B;&#x5EFA; express &#x548C; WebpackDevMiddleware
webpack-dev-server/lib/Server.js</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Server</span>(<span class="hljs-params">compiler, options</span>) </span>{
  compiler.plugin(<span class="hljs-string">&apos;done&apos;</span>, (stats) =&gt; {
    <span class="hljs-comment">// &#x5F53;&#x5B8C;&#x6210;&#x7F16;&#x8BD1;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5C31;&#x901A;&#x8FC7; websocket &#x53D1;&#x9001;&#x7ED9;&#x5BA2;&#x6237;&#x7AEF;&#x4E00;&#x4E2A;&#x6D88;&#x606F;&#xFF08;&#x4E00;&#x4E2A; `hash` &#x548C; &#x4E00;&#x4E2A;`ok`)</span>
    <span class="hljs-keyword">this</span>._sendStats(<span class="hljs-keyword">this</span>.sockets, stats.toJson(clientStats)); 
  });

  <span class="hljs-keyword">const</span> app = <span class="hljs-keyword">this</span>.app = <span class="hljs-keyword">new</span> express();
  <span class="hljs-keyword">this</span>.middleware = webpackDevMiddleware(compiler, options);
   <span class="hljs-comment">// middleware&#x4F1A;&#x62E6;&#x622A;&#x6240;&#x6709;&#x8BF7;&#x6C42;&#xFF0C;&#x5982;&#x679C;&#x53D1;&#x73B0;&#x5BF9;&#x5E94;&#x7684;&#x8BF7;&#x6C42;&#x662F;&#x8981;&#x8BF7;&#x6C42; `dist` &#x4E2D;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x5219;&#x4F1A;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;</span>
   app.use(<span class="hljs-keyword">this</span>.middleware);
}
</code></pre>
<h4 id="t659.3.2.&#x6D4F;&#x89C8;&#x5668;&#x7AEF;">9.3.2.&#x6D4F;&#x89C8;&#x5668;&#x7AEF; <a href="#t659.3.2.&#x6D4F;&#x89C8;&#x5668;&#x7AEF;"> # </a></h4>
<p>&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x7684;&#x5DE5;&#x4F5C;&#x6D41;&#x7A0B;</p>
<h5 id="t669.3.2.1 &#x5EFA;&#x7ACB;&#x8FDE;&#x63A5;">9.3.2.1 &#x5EFA;&#x7ACB;&#x8FDE;&#x63A5; <a href="#t669.3.2.1 &#x5EFA;&#x7ACB;&#x8FDE;&#x63A5;"> # </a></h5>
<p>&#x521D;&#x59CB;&#x5316;&#x7684;&#x65F6;&#x5019;&#xFF0C;client.js &#x4F1A;&#x542F;&#x52A8;&#x4E00;&#x4E2A; socket &#x548C; webpack-dev-server &#x5EFA;&#x7ACB;&#x8FDE;&#x63A5;&#xFF0C;&#x7136;&#x540E;&#x7B49;&#x5F85; hash &#x548C; ok &#x6D88;&#x606F;
webpack-dev-server/client/index.js:212</p>
<pre><code class="lang-js">socket(socketUrl, onSocketMsg);
</code></pre>
<h5 id="t679.3.2.2 &#x5411;client&#x53D1;&#x6D88;&#x606F;">9.3.2.2 &#x5411;client&#x53D1;&#x6D88;&#x606F; <a href="#t679.3.2.2 &#x5411;client&#x53D1;&#x6D88;&#x606F;"> # </a></h5>
<p>&#x5411;client&#x53D1;&#x9001;&#x4E00;&#x6761;&#x66F4;&#x65B0;&#x6D88;&#x606F;
&#x5F53;&#x6709;&#x6587;&#x4EF6;&#x53D1;&#x751F;&#x53D8;&#x52A8;&#x7684;&#x65F6;&#x5019;&#xFF0C;webpack&#x7F16;&#x8BD1;&#x6587;&#x4EF6;&#xFF0C;&#x5E76;&#x901A;&#x8FC7; websocket &#x5411;client&#x53D1;&#x9001;&#x4E00;&#x6761;&#x66F4;&#x65B0;&#x6D88;&#x606F;
webpack-dev-server/lib/Server.js:119</p>
<pre><code class="lang-js"> compiler.plugin(<span class="hljs-string">&apos;done&apos;</span>, (stats) =&gt; {
    <span class="hljs-comment">// &#x5F53;&#x5B8C;&#x6210;&#x7F16;&#x8BD1;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5C31;&#x901A;&#x8FC7; websocket &#x53D1;&#x9001;&#x7ED9;&#x5BA2;&#x6237;&#x7AEF;&#x4E00;&#x4E2A;&#x6D88;&#x606F;&#xFF08;&#x4E00;&#x4E2A; `hash` &#x548C; &#x4E00;&#x4E2A;`ok`)</span>
    <span class="hljs-keyword">this</span>._sendStats(<span class="hljs-keyword">this</span>.sockets, stats.toJson(clientStats)); 
  });
</code></pre>
<h5 id="t689.3.2.3 &#x4FDD;&#x5B58;hash">9.3.2.3 &#x4FDD;&#x5B58;hash <a href="#t689.3.2.3 &#x4FDD;&#x5B58;hash"> # </a></h5>
<p>&#x5F53;&#x6709;&#x6587;&#x4EF6;&#x5185;&#x5BB9;&#x6539;&#x52A8;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x9996;&#x5148;&#x4F1A;&#x6536;&#x5230; webpack-dev-server &#x53D1;&#x6765;&#x7684; hash &#x6D88;&#x606F;&#xFF0C;&#x5F97;&#x5230;&#x65B0;&#x7684; &#x54C8;&#x5E0C;&#x503C;&#x5E76;&#x4FDD;&#x5B58;&#x8D77;&#x6765;
webpack-dev-server/client/index.js:85</p>
<pre><code class="lang-js">hash: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hash</span>(<span class="hljs-params">_hash</span>) </span>{
    currentHash = _hash;
},
</code></pre>
<h5 id="t699.3.2.4 &#x6536;&#x5230; ok &#x6D88;&#x606F;">9.3.2.4 &#x6536;&#x5230; ok &#x6D88;&#x606F; <a href="#t699.3.2.4 &#x6536;&#x5230; ok &#x6D88;&#x606F;"> # </a></h5>
<p>&#x7136;&#x540E;&#x4F1A;&#x7ACB;&#x523B;&#x63A5;&#x6536;&#x5230; ok &#x6D88;&#x606F;&#xFF0C;&#x8868;&#x793A;&#x73B0;&#x5728;&#x53EF;&#x4EE5;&#x52A0;&#x8F7D;&#x6700;&#x65B0;&#x7684;&#x4EE3;&#x7801;&#x4E86;&#xFF0C;&#x4E8E;&#x662F;&#x8FDB;&#x5165; reloadApp &#x65B9;&#x6CD5;
webpack-dev-server/client/index.js:136</p>
<pre><code class="lang-js">ok: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ok</span>(<span class="hljs-params"></span>) </span>{
    sendMsg(<span class="hljs-string">&apos;Ok&apos;</span>);
    reloadApp();
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reloadApp</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">var</span> hotEmitter = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack/hot/emitter&apos;</span>);
  hotEmitter.emit(<span class="hljs-string">&apos;webpackHotUpdate&apos;</span>, currentHash);  
}
</code></pre>
<h5 id="t709.3.2.5 check&#x65B9;&#x6CD5;&#x6267;&#x884C;">9.3.2.5 check&#x65B9;&#x6CD5;&#x6267;&#x884C; <a href="#t709.3.2.5 check&#x65B9;&#x6CD5;&#x6267;&#x884C;"> # </a></h5>
<p>reloadApp&#x4F1A;&#x89E6;&#x53D1;check&#x65B9;&#x6CD5;&#x6267;&#x884C;
webpack/hot/dev-server.js:51</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> hotEmitter = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./emitter&quot;</span>);
hotEmitter.on(<span class="hljs-string">&quot;webpackHotUpdate&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">currentHash</span>) </span>{
    lastHash = currentHash;
    check();
});
</code></pre>
<h5 id="t719.3.2.6 &#x83B7;&#x53D6;manifest&#x6587;&#x4EF6;">9.3.2.6 &#x83B7;&#x53D6;manifest&#x6587;&#x4EF6; <a href="#t719.3.2.6 &#x83B7;&#x53D6;manifest&#x6587;&#x4EF6;"> # </a></h5>
<p>webpack/lib/HotModuleReplacement.runtime.js&#xFF1A;134</p>
<pre><code class="lang-js">    check: hotCheck

        <span class="hljs-keyword">return</span> hotDownloadManifest(hotRequestTimeout).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">update</span>) </span>{
      <span class="hljs-comment">//// &#x53D6;&#x5230;&#x4E86; manifest&#x540E;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;jsonp &#x52A0;&#x8F7D;&#x6700;&#x65B0;&#x7684;&#x6A21;&#x5757;&#x7684;JS&#x4EE3;&#x7801;&#x4E86;  </span>
            hotEnsureUpdateChunk(chunkId);
   }

   <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hotEnsureUpdateChunk</span>(<span class="hljs-params">chunkId</span>) </span>{
            hotDownloadUpdateChunk(chunkId);
    }
</code></pre>
<p>webpack/lib/web/JsonpMainTemplate.runtime.js</p>
<pre><code class="lang-js">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hotDownloadManifest</span>(<span class="hljs-params">requestTimeout</span>) </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resolve, reject</span>) </span>{
                <span class="hljs-keyword">var</span> request = <span class="hljs-keyword">new</span> XMLHttpRequest();
                <span class="hljs-keyword">var</span> requestPath = $<span class="hljs-built_in">require</span>$.p + $hotMainFilename$;
                request.open(<span class="hljs-string">&quot;GET&quot;</span>, requestPath, <span class="hljs-literal">true</span>);
                request.timeout = requestTimeout;
                request.send(<span class="hljs-literal">null</span>);
              request.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
                 <span class="hljs-keyword">var</span> update = <span class="hljs-built_in">JSON</span>.parse(request.responseText);
                 resolve(update);
             };
        });
    }
</code></pre>
<h5 id="t729.3.2.7 &#x52A0;&#x8F7D;&#x65B0;&#x6A21;&#x5757;">9.3.2.7 &#x52A0;&#x8F7D;&#x65B0;&#x6A21;&#x5757; <a href="#t729.3.2.7 &#x52A0;&#x8F7D;&#x65B0;&#x6A21;&#x5757;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hotDownloadUpdateChunk</span>(<span class="hljs-params">chunkId</span>) </span>{ 
        <span class="hljs-comment">// &#x901A;&#x8FC7;jsonp&#x7684;&#x65B9;&#x5F0F;&#x52A0;&#x8F7D;</span>
         <span class="hljs-keyword">var</span> head = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;head&quot;</span>)[<span class="hljs-number">0</span>];
         <span class="hljs-keyword">var</span> script = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;script&quot;</span>);
         script.type = <span class="hljs-string">&quot;text/javascript&quot;</span>;
         script.charset = <span class="hljs-string">&quot;utf-8&quot;</span>;
         script.src = __webpack_require__.p + <span class="hljs-string">&quot;&quot;</span> + chunkId + <span class="hljs-string">&quot;.&quot;</span> + hotCurrentHash + <span class="hljs-string">&quot;.hot-update.js&quot;</span>;
         ;
         head.appendChild(script);
     }
</code></pre>
<p>&#x52A0;&#x8F7D;&#x5230;&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;</p>
<pre><code class="lang-js">webpackHotUpdate(<span class="hljs-number">0</span>,{
<span class="hljs-string">&quot;moduleId&quot;</span>:
 (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">module, exports, __webpack_require__</span>) </span>{
})
})
</code></pre>
<h5 id="t739.3.2.8 accept &#x56DE;&#x8C03;">9.3.2.8 accept &#x56DE;&#x8C03; <a href="#t739.3.2.8 accept &#x56DE;&#x8C03;"> # </a></h5>
<p>&#x8C03;&#x7528;&#x5BF9;&#x5E94;&#x7684; accept &#x56DE;&#x8C03;
webpack/lib/HotModuleReplacement.runtime:278
hotApply &#x65B9;&#x6CD5;&#x7684;&#x540E;&#x9762;&#x90E8;&#x5206;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hotApply</span>(<span class="hljs-params">options</span>) </span>{
  <span class="hljs-keyword">for</span>(moduleId <span class="hljs-keyword">in</span> outdatedDependencies) {
  <span class="hljs-built_in">module</span> = installedModules[moduleId];
                 <span class="hljs-keyword">if</span>(<span class="hljs-built_in">module</span>) {
                     moduleOutdatedDependencies = outdatedDependencies[moduleId];
                     <span class="hljs-keyword">var</span> callbacks = [];
                     <span class="hljs-keyword">for</span>(i = <span class="hljs-number">0</span>; i &lt; moduleOutdatedDependencies.length; i++) {
                         dependency = moduleOutdatedDependencies[i];
                         <span class="hljs-comment">// &#x5148;&#x53BB;&#x5230;&#x6240;&#x6709;&#x5BF9;&#x8FD9;&#x4E2A;&#x6A21;&#x5757;&#x6CE8;&#x518C;&#x7684; accept &#x56DE;&#x8C03;</span>
                         cb = <span class="hljs-built_in">module</span>.hot._acceptedDependencies[dependency]; 
                         <span class="hljs-keyword">if</span>(cb) {
                             <span class="hljs-keyword">if</span>(callbacks.indexOf(cb) &gt;= <span class="hljs-number">0</span>) <span class="hljs-keyword">continue</span>;
                             callbacks.push(cb);
                         }
                     }
                     <span class="hljs-keyword">for</span>(i = <span class="hljs-number">0</span>; i &lt; callbacks.length; i++) {
                         cb = callbacks[i];
                         <span class="hljs-keyword">try</span> {
                             <span class="hljs-comment">// &#x6328;&#x4E2A;&#x8C03;&#x7528;&#x4E00;&#x904D;</span>
                             cb(moduleOutdatedDependencies); 
                         } 
                     }
                 }

         }
}
</code></pre>
<h2 id="t7410. &#x8F93;&#x51FA;&#x5206;&#x6790;">10. &#x8F93;&#x51FA;&#x5206;&#x6790; <a href="#t7410. &#x8F93;&#x51FA;&#x5206;&#x6790;"> # </a></h2>
<p>&#x901A;&#x8FC7;&#x4F7F;&#x7528;<a href="https://www.npmjs.com/package/webpack-bundle-analyzer">webpack-bundle-analyzer</a>&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x9879;&#x76EE;&#x5404;&#x6A21;&#x5757;&#x7684;&#x5927;&#x5C0F;&#xFF0C;&#x53EF;&#x4EE5;&#x6309;&#x9700;&#x4F18;&#x5316;</p>
<p><img src="http://img.zhufengpeixun.cn/analyse.gif" alt="analyse"></p>
<h3 id="t7510.1 &#x5B89;&#x88C5;">10.1 &#x5B89;&#x88C5; <a href="#t7510.1 &#x5B89;&#x88C5;"> # </a></h3>
<pre><code class="lang-js">npm install --save-dev webpack-bundle-analyzer
</code></pre>
<h3 id="t7610.2 &#x914D;&#x7F6E;">10.2 &#x914D;&#x7F6E; <a href="#t7610.2 &#x914D;&#x7F6E;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> BundleAnalyzerPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack-bundle-analyzer&apos;</span>).BundleAnalyzerPlugin;
plugins: [
  <span class="hljs-keyword">new</span> BundleAnalyzerPlugin(
           {
              <span class="hljs-attr">analyzerMode</span>: <span class="hljs-string">&apos;server&apos;</span>,
              <span class="hljs-attr">analyzerHost</span>: <span class="hljs-string">&apos;127.0.0.1&apos;</span>,
              <span class="hljs-attr">analyzerPort</span>: <span class="hljs-number">8889</span>,
              <span class="hljs-attr">reportFilename</span>: <span class="hljs-string">&apos;report.html&apos;</span>,
              <span class="hljs-attr">defaultSizes</span>: <span class="hljs-string">&apos;parsed&apos;</span>,
              <span class="hljs-attr">openAnalyzer</span>: <span class="hljs-literal">true</span>,
              <span class="hljs-attr">generateStatsFile</span>: <span class="hljs-literal">false</span>,
              <span class="hljs-attr">statsFilename</span>: <span class="hljs-string">&apos;stats.json&apos;</span>,
              <span class="hljs-attr">statsOptions</span>: <span class="hljs-literal">null</span>,
              <span class="hljs-attr">logLevel</span>: <span class="hljs-string">&apos;info&apos;</span>
            }
       ),
]
</code></pre>
<h3 id="t7710.3  &#x8F93;&#x51FA;">10.3  &#x8F93;&#x51FA; <a href="#t7710.3  &#x8F93;&#x51FA;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-string">&quot;analyz&quot;</span>: <span class="hljs-string">&quot;NODE_ENV=production npm_config_report=true npm run build&quot;</span>
</code></pre>
<h3 id="t7810.4 &#x5728;&#x7EBF;&#x5206;&#x6790;">10.4 &#x5728;&#x7EBF;&#x5206;&#x6790; <a href="#t7810.4 &#x5728;&#x7EBF;&#x5206;&#x6790;"> # </a></h3>
<pre><code class="lang-js">webpack --profile --json &gt; stats.json
</code></pre>
<ul>
<li>profile&#xFF1A;&#x8BB0;&#x5F55;&#x4E0B;&#x6784;&#x5EFA;&#x8FC7;&#x7A0B;&#x4E2D;&#x7684;&#x8017;&#x65F6;&#x4FE1;&#x606F;&#xFF1B;</li>
<li><p>json&#xFF1A;&#x4EE5; JSON &#x7684;&#x683C;&#x5F0F;&#x8F93;&#x51FA;&#x6784;&#x5EFA;&#x7ED3;&#x679C;&#xFF0C;&#x6700;&#x540E;&#x53EA;&#x8F93;&#x51FA;&#x4E00;&#x4E2A; .json &#x6587;&#x4EF6;&#xFF0C;&#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#x4E2D;&#x5305;&#x62EC;&#x6240;&#x6709;&#x6784;&#x5EFA;&#x76F8;&#x5173;&#x7684;&#x4FE1;&#x606F;&#x3002;</p>
</li>
<li><p>Webpack &#x5B98;&#x65B9;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x53EF;&#x89C6;&#x5316;&#x5206;&#x6790;&#x5DE5;&#x5177;  <a href="https://webpack.github.io/analyse">Webpack Analyse</a></p>
</li>
<li><p>Modules&#xFF1A;&#x5C55;&#x793A;&#x6240;&#x6709;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x6BCF;&#x4E2A;&#x6A21;&#x5757;&#x5BF9;&#x5E94;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x3002;&#x5E76;&#x4E14;&#x8FD8;&#x5305;&#x542B;&#x6240;&#x6709;&#x6A21;&#x5757;&#x4E4B;&#x95F4;&#x7684;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#x56FE;&#x3001;&#x6A21;&#x5757;&#x8DEF;&#x5F84;&#x3001;&#x6A21;&#x5757;ID&#x3001;&#x6A21;&#x5757;&#x6240;&#x5C5E; Chunk&#x3001;&#x6A21;&#x5757;&#x5927;&#x5C0F;&#xFF1B;</p>
</li>
<li>Chunks&#xFF1A;&#x5C55;&#x793A;&#x6240;&#x6709;&#x7684;&#x4EE3;&#x7801;&#x5757;&#xFF0C;&#x4E00;&#x4E2A;&#x4EE3;&#x7801;&#x5757;&#x4E2D;&#x5305;&#x542B;&#x591A;&#x4E2A;&#x6A21;&#x5757;&#x3002;&#x5E76;&#x4E14;&#x8FD8;&#x5305;&#x542B;&#x4EE3;&#x7801;&#x5757;&#x7684;ID&#x3001;&#x540D;&#x79F0;&#x3001;&#x5927;&#x5C0F;&#x3001;&#x6BCF;&#x4E2A;&#x4EE3;&#x7801;&#x5757;&#x5305;&#x542B;&#x7684;&#x6A21;&#x5757;&#x6570;&#x91CF;&#xFF0C;&#x4EE5;&#x53CA;&#x4EE3;&#x7801;&#x5757;&#x4E4B;&#x95F4;&#x7684;&#x4F9D;&#x8D56;&#x5173;&#x7CFB;&#x56FE;&#xFF1B;</li>
<li>Assets&#xFF1A;&#x5C55;&#x793A;&#x6240;&#x6709;&#x8F93;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x8D44;&#x6E90;&#xFF0C;&#x5305;&#x62EC; .js&#x3001;.css&#x3001;&#x56FE;&#x7247;&#x7B49;&#x3002;&#x5E76;&#x4E14;&#x8FD8;&#x5305;&#x62EC;&#x6587;&#x4EF6;&#x540D;&#x79F0;&#x3001;&#x5927;&#x5C0F;&#x3001;&#x8BE5;&#x6587;&#x4EF6;&#x6765;&#x81EA;&#x54EA;&#x4E2A;&#x4EE3;&#x7801;&#x5757;&#xFF1B;</li>
<li>Warnings&#xFF1A;&#x5C55;&#x793A;&#x6784;&#x5EFA;&#x8FC7;&#x7A0B;&#x4E2D;&#x51FA;&#x73B0;&#x7684;&#x6240;&#x6709;&#x8B66;&#x544A;&#x4FE1;&#x606F;&#xFF1B;</li>
<li>Errors&#xFF1A;&#x5C55;&#x793A;&#x6784;&#x5EFA;&#x8FC7;&#x7A0B;&#x4E2D;&#x51FA;&#x73B0;&#x7684;&#x6240;&#x6709;&#x9519;&#x8BEF;&#x4FE1;&#x606F;&#xFF1B;</li>
<li>Hints&#xFF1A;&#x5C55;&#x793A;&#x5904;&#x7406;&#x6BCF;&#x4E2A;&#x6A21;&#x5757;&#x7684;&#x8FC7;&#x7A0B;&#x4E2D;&#x7684;&#x8017;&#x65F6;&#x3002;</li>
</ul>
<h2 id="t79&#x53C2;&#x8003;">&#x53C2;&#x8003; <a href="#t79&#x53C2;&#x8003;"> # </a></h2>
<ul>
<li><a href="http://taobaofed.org/blog/2016/12/08/happypack-source-code-analysis/">happypack-source-code-analysis</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
